Flex布局简单总结

flex布局

写在前面

flex布局可以说是目前移动端布局中运用最多的一种布局方式了，专门针对移动端开发，以前的老技术就不提了，现在火热的比如微信小程序，React Native等都对flex布局支持相当友好！

父项常见属性详解

flex：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

• 父项盒子的常见属性

• flex-direction：设置主轴的方向，子元素是跟着主轴来排列的

  • 主轴默认X，水平向右

  • 侧轴默认Y，水平向下

  • :row //默认值，从左到右

    :row-reverse //从右到左

    :column //从上倒下

    :column-reverse //从下到上

• justify-content：设置主轴上的子元素排列方式

  • :flex-start //默认值,如果主轴为X / Y，则从左到右 / 上到下

    :flex-end //从尾部开始排列

    :center //在主轴居中显示

    :space-around //均分剩余空间

    :space-between //先两边贴边，再均分剩余空间

• flex-wrap：设置子元素是否换行

  • flex布局中默认是不换行的，谁是主轴，默认就是根据主轴排成一行

  • :nowrap //不换行，默认

    :warp //换行显示

• align-content：设置侧轴上的子元素的排列方式（多行）

  • 控制子项在侧轴（默认是y轴）上的排列方式 在子项为多行的时候使用

    • :flex-start //默认是在侧轴的头部开始排列

      :flex-end //在侧轴的尾部开始排列

      :center //在侧轴的中间显示

      :space-around //子项在侧轴上均分剩余空间

      :space-between //子项在侧轴先分布在两侧，在均分剩余空间

      :stretch // 设置子项元素高度均分父元素高度

• align-items：设置侧轴上的子元素排列方式（单行）

  • 控制子项在侧轴（默认是y轴）上的排列方式 在子项为单行的时候使用

  • :flex-start //从头部开始

    :flex-end //从尾部开始

    :center //居中显示

    :stretch //拉伸

• flex-flow：复合属性，相当于同时设置 flex-direction(主轴方向) 和 flex-wrap(换行)

子项常见属性详解

• flex：子项目占的份数

  • flex 属性定义子项目分配剩余空间，用flex来表示占多少份数

    • .item {
          flex: <number>; /* 默认值 0 */
      }
      

• align-self ：控制子项在侧轴上的排列方式

  • 我们已经知道，可以通过父元素来控制子元素在侧抽上的排列（单行/多行）
  • align-self 属性允许单个项目有不一样的对齐方式，可覆盖 align-items 属性。
  • 默认值为 auto，表示继承父元素的 align-items 属性
  • 如果没有父元素，则等同于 stretch。

• order ：定义项目的排列顺序

  • 数值越小，排列越靠前，默认为0。

  • .item {
        order: 1;
    }
    

.