Flexbox 布局

[tiu5]

Flexbox 最适合是沿单个轴分布元素，要么是水平方向的，要么是垂直方向的。
而 Grid 它是二维的，也就是说水平和垂直方向都可以排列元素。

• 一维布局，布局根据内容元素自适应：Flexbox
• 二维布局，复杂非线性页面布局：Grid

拥抱自适应性

与浮动和其他传统布局不同的是，Flexbox 和 Grid 布局的出现是为了解决多设备出现的问题。

父元素和子元素

定义一个父容器：

.container{
    display: flex; /* 或者 display: inline-flex; */
}

容器里的子元素：

.item{
    order: {Int}; /* 设置排列顺序的权值 */
}

父容器的属性

flex-direction

• row(默认值): 行排列，从左到右。
• row-reverse: 反向，从右到左。
• column: 列排列，从上到下。
• column-reverse: 从下到上。

flex-wrap

一行或列不够放，多出的那一行/列要怎么放，用它 flex-wrap。

• nowrap(默认值): 单行显示。
• wrap: 多行显示。
• wrap-reverse: 多行显示。

flex-flow: flex-direction, flex-wrap

flex-flow: flex-direction + flex-wrap 的简写版。

justify-content 主轴上的伸缩项目对齐方式

• flex-start: 靠起始位置
• flex-end: 靠结束位置
• center: 居中
• space-between: 两头的项目贴边，其余间距一样
• space-around: 所有项目间距都一样

align-items 侧轴上的伸缩项目（包括隐式）对齐方式

• flex-start: 靠起始位置
• flex-end: 靠结束位置
• center: 居中
• stretch
• baseline

align-content 侧轴上的伸缩项目对齐方式

• flex-start: 靠起始位置
• flex-end: 靠结束位置
• center: 居中
• space-between: 两头的项目贴边，其余间距一样
• space-around: 所有项目间距都一样
• stretch

order: 设置排列的权值

order: {Int} 权值越小，排越前，可为负数。

flex-grow: 设置比例的单位

flex-grow: {+Int} 为负数时失效。父容器大小减去确定大小的项目，在去按比例分给该元素。

假设：父容器宽度为 1000px，里面有四个子项目(A, B, C, D)，A, B 宽度为 100px，C 宽度为 20%，在 D 中 flex-grow: 2; 那么 D 的宽度为：(1000 - 100 - 100 - 1000 * 20) / 2 * 2 = 600 px

代码示例

flex-shrink: 定义 Flex 项目缩小比例

flex-basis: 设置主轴方向的大小，可看成是宽度/高度，不过权值比它们高

flex: flex-grow, flex-shrink, flex-basis

flex: none; => flex-grow: 0;flex-shrink: 0;flex-basis: auto;

align-self: 设置单独的 Flex 项目样式

• flex-start: 靠起始位置
• flex-end: 靠结束位置
• center: 居中
• stretch
• baseline

PS: 跟 Grid 布局一起食用更佳。因为它俩很多属性都类似。

参考资料

• 一个完整的Flexbox指南
• Flexbox和网格, 你的布局好助手
• 图解 Flexbox
• 图解 Flexbox 2 - 深入理解