Flex

[YBFACC]

Flex

此图引用MDN

属性

• 父容器设置

  • `justify-content：分配弹性容器主轴的元素之间及其周围的空间
  • flex-direction：主轴的方向
  • flex-warp：是否换行
  • flex-flow： flex-direction 和 flex-wrap 的简写
  • align-items：当前行上，弹性项目沿侧轴默认如何排布
  • align-content：在侧轴上的对齐方式。（生效条件：允许换行）

• 子容器设置

  • order：决定子容器的排列顺序
  • flex-grow：伸缩-扩展基数
  • flex-shrink：收缩规则
  • flex-basis： 在主轴方向上的初始大小
  • flex：简写 flex-grow, flex-shrink 与 flex-basis
  • align-self：覆盖父容器的align-items。

测试

justify-content

• space-evenly：均分空白。

• space-around：首尾空白减半，其他均分。

• space-between：首尾对齐，均分空白。

• stretch：伸展

• flex-start、center、flex-end

  ​ space-evenly

  ​ space-around

  ​ space-between

flex-direction

• row ：默认。从左到右排列

• row-reverse：从右到左排列

• column：从上到下排列

• column-reverse：从下到上排列

  ​ column-reverse排列

flex-wrap

• nowrap：默认不换行
• wrap：允许换行
• wrap-reverse：允许换行，但是 cross-start 和 cross-end 互换。

align-items

• center

• flex-start

• flex-end

• baseline

  • first baseline
  • last baseline

• stretch

  ​ center

​ flex-strat

​ flex-end

​ last baseline

align-content

• center、flex-start、flex-end

• space-between、space-around、space-evenly

• stretch

• baseline

  ​ center

​ space-between

当出现换行时，align-content和align-items的行为

1. align-content: normal或者不设置

可以看到弹性容器被分成上下2 个子项。空间平均分配，子项行高占满。

2. 再设置align-items：center

align-items以当前行高进行渲染。

1. align-content: space-around;

   

可以看到 行高被压缩，每行以当前行内最高的元素为基础。

2. 再设置align-items：center

align-items以当前行高进行渲染。

order

不设置默认为0，数字越大，优先级越低。

    <div class="father1">
      <div class="son1" style="order: 4;">1</div>
      <div class="son1" style="order: 3;">2</div>
      <div class="son1" style="order: 2;">3</div>
      <div class="son1" style="order: 1;">4</div>
    </div>

flex-grow

默认设置为0。

它指定了flex容器中剩余空间的多少应该分配给项目

剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配。

​ 第一项flex-grow：1

​ 第一项flex-grow：0.6

flex-shrink

默认设置为0。为0时不参与收缩。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

​ 总宽度300px，子项宽度为100px，指定2个flex-shrink: 1

flex-basis

默认设置为auto。（含义是 "参照我的width和height属性"）

指定了 flex 元素在主轴方向上的初始大小。

如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

flex

单值语法: 值必须为以下其中之一:

• 一个无单位数 它会被当作的值。
• 一个有效的**宽度(width)**值: 它会被当作 <flex-basis>的值。
• 关键字none，auto或initial.

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 <flex-shrink> 的值。
• 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

三值语法:

• 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
• 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

• auto===flex: 1 1 auto：完全弹性
• initial===flex: 0 1 auto：不能伸长
• none===flex: 0 0 auto ：不弹性

align-self

​ 指定align-content为center，第一项alidn-self为start。

参考

CSS 常见布局方式

[使用 CSS 弹性盒子](