CSS Flex布局

初发布于 17 Apr 2018 | in CSS

CSS Flexbox

弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。

它提供了一种更加灵活的方式来对元素进行布局（排列、对齐、分配空白空间）。如：创建multi-column布局。

基本概念

flex container 伸缩容器、flex item 伸缩项目、axis 轴（main axis主轴、cross axis交叉轴）、direction 方向（row、column）、wrap 换行。

flex

该属性是 flex-grow、 flex-basis 和 flex-shrink 三个属性的缩写形式。

  • flex-grow，设定 flex item 的拉伸因子，当 flex item 默认 size 小于 flex 容器时，将根据此系数拉伸以填充容器。该元素在 flex 容器的 available space 里相对于其他 children 应该占据的空间。值为 nubmer 型，负数无效。初始值为 0。
  • flex-shrink，设定 flex item 的收缩因子，当 flex item 默认 size 大于 flex 容器时（空间不足），将根据此系数收缩以填充容器。值为 nubmer 型，负数无效。初始值为 1。
  • flex-basis，设定 flex item 的初始 main size（即 content-box 的尺寸，如果没有改变 box-sizing）。值为 length 或表宽度的关键词。初始值为 auto。
  • 如果所有子元素 flex-grow 的值都相等，则 flex 容器中的剩余空间将平均分配给所有子元素。

通过在子元素上设置 flex: 1 1 0; 可实现 flex 容器被平均分配的效果。

flex-flow

该属性是 flex-direction 和 flex-wrap 两个属性的缩写形式。

  • flex-direction，设定 flex item 在容器里的主轴和方向。默认值为 row。
  • flex-wrap，设定是否强制 flex item 摆放在一行。默认值为 nowrap。

align-items

该属性设置 flex 子元素在交叉轴（cross axis）上的对齐方式。

默认值为 stretch，即拉伸子元素（如果子元素未设置高度或高度为auto）以填充容器。

子元素的 order

该属性设置 flex 子元素的排列顺序。默认值为 0。数值越小，排列越靠前。

兼容性问题

与默认定位的footer相邻的元素，如果同时设置了 flex-grow-1、 d-flex、flex-column，在 Safari 中，由于该相邻元素的内容尺寸计算，没有撑起实际容器高度导致 footer 会浮动到页面中间。 去掉 flex-column 即可。