Flex布局

Flex布局

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

• 主轴– flex 容器的主轴是布置 flex 项目的主轴。请注意，它不一定是水平的；这取决于flex-direction属性（见下文）。
• 交叉轴——与主轴垂直的轴称为交叉轴。其方向取决于主轴方向。

三、父级的属性

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

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

.container {  
    flex-direction: row | row-reverse | column | column-reverse; 
}

• row（默认）：从左到右
• row-reverse: 从右到左
• column: 同row但是从上到下
• column-reverse: 相同，row-reverse但从下到上

flex-wrap

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap （默认）：所有弹性项目都在一行上
• wrap: flex 项目将从上到下包裹到多行上。换行，第一行在上方。
• wrap-reverse: flex 项目将从下到上包裹在多行上。换行，第一行在下方。

flex-flow

这是flex-direction和flex-wrap属性的简写，它们共同定义了 flex 容器的主轴和交叉轴。默认值为row nowrap。

.container {
  flex-flow: column wrap;
}

justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

justify-content属性定义了项目在主轴上的对齐方式。

• flex-start （默认）：项目被打包到 flex-direction 的起点。
• flex-end: 项目在 flex-direction 的末尾被打包。
• start: 物品向开始writing-mode方向包装。
• end: 物品被包装到方向的尽头writing-mode。
• left：项目被包装在容器的左边缘，除非这对 没有意义，否则flex-direction它的行为就像start。
• right: 物品被包装在容器的右边缘，除非这对 没有意义，否则flex-direction它的行为就像end。
• center：项目沿线居中
• space-between：物品均匀分布在行中；第一项在开始行，最后一项在结束行
• space-around：项目均匀分布在一行中，周围等距。请注意，视觉上的空间不相等，因为所有项目的两侧都有相等的空间。第一个项目将与容器边缘有一个单位的空间，但下一个项目之间有两个单位的空间，因为下一个项目有自己的适用间距。
• space-evenly：项目的分布使得任意两个项目之间的间距（以及到边缘的空间）相等。

align-items

定义了如何在当前行上沿交叉轴布置 flex 项目的默认行为。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch （默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）
• flex-start/ start/ self-start：物品放置在交叉轴的开始。这些之间的区别是微妙的，是关于尊重flex-direction规则或writing-mode规则。
• flex-end/ end/ self-end：物品放置在交叉轴的端部。区别再次是微妙的，是关于尊重flex-direction规则与writing-mode规则。
• center: 项目以横轴为中心
• baseline：项目对齐，例如它们的基线对齐

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal （默认）：项目在其默认位置打包，就好像没有设置任何值一样。
• flex-start/ start：包装到容器开头的项目。（更多支持的）flex-start尊重flex-direction而start尊重writing-mode方向。
• flex-end/ end：包装到容器末端的物品。（更多支持）flex-end尊重flex-direction而结束尊重writing-mode方向。
• center: 以容器为中心的物品
• space-between：物品均匀分布；第一行在容器的开头，而最后一行在结尾
• space-around: 项目均匀分布，每行周围等距
• space-evenly: 物品均匀分布，周围等距
• stretch: 线条伸展以占用剩余空间

四、子项的属性

order

.item {
  order: 5; /* default is 0 */
}

order属性控制它们在 flex 容器中出现的顺序

flex-grow

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。负数无效。

.item {
  flex-grow: 4; /* default 0 */
}

flex-shrink

这定义了 flex 项目在必要时收缩的能力。负数无效。

.item {
  flex-shrink: 3; /* default 1 */
}

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

参考

• Flexbox 完整指南
• Flex 布局教程：语法篇