• 弹性盒子常用属性


    添加浏览器前缀: -webkit-           也可用postCss自动添加

    display:-webkit-flex;  *如果用了弹性布局,子元素不需要浮动,

    -webkit-justify-content:      子元素水平排列方式方式。

            center      水平居中

            space-between  两端对齐

            space-around    手拉手平均分

            flex-start     居左对齐

            flex-end      居右对齐

    -webkit-align-items:       子元素垂直排列

            center      垂直居中

            space-between  上下两端对齐

            space-around    手拉手上下平均分

            flex-start     顶部对齐

            flex-end      底部对齐

    -webkit-flex-direction:     排列方式        

            row       默认值  横向排列

            row-reverse    横向颠倒排列    *不常用

            column      垂直排列

            column-reverse   垂直颠倒排列    *不常用    

    -webkit-flex-wrap:         默认no-wrap让元素步换行

            wrap   换行

            nowrap   不换行

    -webkit-align-content:         控制容器内多行在Y轴上的排列方式

            stretch      默认值

            center       居中对齐

            flex-start        顶部对齐

            flex-end         底部对齐

            space-between   上下对齐

            space-around   上下手拉手对齐

            

    子级

    flex:1     1指的是一个系数 *子元素再划分父元素宽度,先刨除固定宽度

    flex-grow:1    定义子元素放大比例

  • 相关阅读:
    深入理解C++右值引用
    并发编程的原子性和顺序性
    LLVM简介
    APK及相关的Android路径
    UE4资源移动与跨项目迁移
    OpenGL简介
    IDEA无限试用插件
    使用idea搭建springcloud
    .NET Core 微服务架构 Steeltoe 使用(基于 Spring Cloud)
    微服务:注册中心ZooKeeper、Eureka、Consul 、Nacos对比
  • 原文地址:https://www.cnblogs.com/xm16/p/10337456.html
Copyright © 2020-2023  润新知