flex布局

159 阅读3分钟

flex布局

  • 父元素开启Flex布局的元素叫 flex container,一般我们用display:flex或者display:inline-flex开启布局。display:flex默认采用的是水平方向排布从左到右。
  • flex container里面的直接子元素叫做flex items。

flex-decoration

属性值:

row(默认值) : 按行排列 主轴从左到右

row-reverse 按行排列 主轴从右到左

column: 按列排列 主轴 从上到下

column-reverse 按列排列 主轴从下到上

Justify-content

justify-content 决定了flex items 在main axis (主轴)上的对齐方式

flex-start(默认值):与main start对齐

flex-end: 与main end 对齐

center:居中对齐

space-between:

  • flex items之间的距离相等

  • 与main start、 main -end两端对齐。

space-evenly:

flex items 之间的距离相等。

  • flex items 与main -start、 main-end之间的距离等于flex items之间的距离

space-around:

  • flex items之间的距离相等

space-around:

  • flex items之间的距离相等。

  • flex items 与 main start、main end之间的距离是flex items之间距离的一半。

align-items

决定flex-items在交叉轴上的对齐方式。默认情况下,flex-items在同一行进行显示,有可能会对对象进行压缩,但是不会进行换行。

**normal:**在弹性布局中,效果和stretch一样。

stretch:当flex items在across axis方向的size为auto时,会自动拉伸至填充flex container.

**flex-start:**与across start对齐。

flex-end:与acrossend对齐。

center:居中对齐。

**baseline:**与基准线对齐。

flex-wrap

决定flex contanier是单行还是多行

flex-wrap:nowrap(默认值,单行,不会换行)

flex-wrap:wrap(换行,多行)

align-content

决定多行flex-items在交叉轴上面的对齐方式,用法与justify-content相似。

**normal:**在弹性布局中,效果和stretch一样。

stretch:当flex items在across axis方向的size为auto时,会自动拉伸至填充flex container.

**flex-start:**与across start对齐。

flex-end:与acrossend对齐。

center:居中对齐。

**baseline:**与基准线对齐。

flex-grow

flex-grow:决定了flex items如何扩展。

  • 可以任意设置非负数字(正数,正整数,0,默认0)
  • 当flex container在main axis 方向有剩余size时,flex--grow才会有效。
  • 如果所有flex items的flex-grow总和超过1,则将剩下的size按比例均分到每一个盒子。 所有盒子全部沾满整个父盒子
  • 如果所有的flex items 的flex-grow总和不超过1,则将剩下的size和按比例均分每一个盒子,但绝对整个父盒子有剩余。

flex-shink

可以设置任意非负数字(正小数、正整数、0)默认值为1.

当flex items在主轴方向超过了flex container的size,flex itemsd的数属性值有效

  • 如果所有的flex items的flex-shink总和超过1,则每个flex items收缩的size值为,flex-items超出 flex containerd的size*收缩比例/所有flex items的收缩比例之和。 所有盒子全部沾满整个父盒子。

  • 如果所有flex itemsd的flex-shink总和sum不超过1,每个flex items收缩的size为 flex items超出flex container的sizesum收缩比例/所以flex iteams之和。

收缩比例=flex-shink*flex iteam的base size