Flexbox 完整指南-译文

CSS flexbox 布局完整指南，本文解释了 Flexbox 的所有内容，并重点介绍了父容器(flex container) 和子元素(flex items)的所有不同可能的属性。包括了历史记录、演示、模式和浏览器支出图标。

背景

在 Flexbox Layout (弹性盒子)模式（W3C候选推荐为2017年10月），对齐和分配容器内的子项目提供更高效的方式。及时这玩意儿的大小和是未知的或者动态变化的。（正如他的名字一样 flex 弹性的意思）

flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。 一个使用了Flex布局的容器，将会扩展其子项以至于填充起可用的空间，或者缩小他们以防止溢出容器。

值得一提的是 Flexbox 布局不像常规布局

（基于垂直的块和基于水平的内联)，flexbox布局方向是无关的。 虽然常规布局对页面很有效，但它们缺乏支持大型或复杂应用程序的灵活性（特别是在涉及方向改变、调整大小、拉伸、收缩等时）。

注意：Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局适用于较大规模的布局。

基础知识和术语

由于 flexbox 是一个完整的模块而不是单个属性，因此它涉及很多东西，包括它的整个属性集。其中一些可以设置在容器上（父元素，称为“弹性容器”），而其他则可以设置在子元素上（称为“弹性项目”）

如果常规布局是基于块布局与内联布局的方向流的，那么弹性布局就是基于“flex-flow流”。请查看下图，它解释了弹性布局的主要思想。

基本上，Flex项目是沿着主轴(main axis)(从main-start向main-end)或者侧轴（cross axis）(从cross-start向cross-end)排列。

• main axis:Flex 容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于 flex-direction 属性。
• main-start | main-end:Flex 项目的配置从容器的主轴起点边开始，往主轴终点边结束。
• main size:Flex 项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex 项目的主轴长度属性是 width 或 height 属性，由哪一个对着主轴方向决定。
• cross axis:与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
• cross-start | cross-end: 伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
• cross size:Flex 项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex 项目的侧轴长度属性是 width 或 height 属性，由哪一个对着侧轴方向决定。

容器属性

display

这个属性是定义在弹性容器上的；根据其值决定是内联还是块布局。这时它的直属下级将会变成flex文档流。

.container {

  display: flex; /* or inline-flex */

}

Flex 容器不是块容器，因此有些设计用来控制块布局的属片在 Flexbox 布局中不适用。特别是：多列组中所有 column-* 属性、float 、 clear 属性和 vertical-align 属性在 Flex 容器上没有作用。

如果元素 display 的值指定为inline-flex ，而且元素是一个浮动元素或绝对定位元素，则 display 的计算值是flex 。

flex-direction

这个是建立在主轴上的，从而定义了 Flex 项目放置在 Flex 容器的方向。FlexBox 是单方向的布局概念。可以将弹性项视为主要布置在水平行或垂直列中。

.container {

  flex-direction: row | row-reverse | column | column-reverse;

}

• row(默认值):如果书写方式是 ltr ，那么 Flex 项目从左向右排列；如果书写方式是 rtl ，那么Flex项目从右向左排列
• row-reverse:如果书写方式是 ltr ，那么Flex项目从右向左排列；如果书写方式是 rtl ，那么Flex项目从左向右排列
• column:和 row 类似，只不过方向是从上到下排列
• column-reverse:和 row-reverse 类似，只不过方向是从下向上排列

flex-wrap

弹性项默认会全部集中在一行。你可以使用这个属性来改变这种情况，让他们根据你的需要进行自动换行。文档方向在这里也起作用，决定了新的一行被堆叠的方向。

• nowrap（默认）：单行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap：多行显示。在ltr排版下，项目自左向右；在rtl下，自右向左
• wrap-reverse：多行显示。与wrap相反

flex-flow

它是 flex-direction 和 flex-wrap 的简写形式。它同时定义了弹性容器的主轴和侧轴。默认是 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;

}

• flex-start （默认）：子项会从一行的起始处开始放置
• flex-end ：子项会从一行的结尾处开始放置
• center ：子项会集中在一行的中央
• space-between ：子项会被均匀的分布在行内；首项放置在一行的开始，尾项放置在一行的结束
• space-around ：子项会均匀的按照同等距离分布在一行。需要注意的是，在视觉上会觉得并不等距，因为所有子项在两侧都需要加上同等的空间。首项会与容器开始边缘有一个单位空间的距离，但是与下一项会有两个单位空间的距离，因为下一项也有它自己的适配空间。

注意这里仅仅罗列除了部分的属性，因为浏览器的支持是不同的。例如 space-between 在某些版本的 Edge 还不支持，Chrome 中没有对 start/end/left/right支持。MDN有详细的图表。最安全的值是 flex-start ，flex-end 和 center 。

align-items

这用来定义弹性项目在弹性容器的当前侧轴上的默认行为。可以认为是侧轴版的 justity-content。

.container {

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

}

• flex-start ：弹性项在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
• flex-end：弹性项在侧轴起点边的外边距紧靠改行在侧轴结尾的边。
• center：弹性项会被放置在侧轴的中央。
• baseline：弹性项会根据他们的基线对齐。
• stretch（默认）：在侧轴方向上拉伸弹性项以致填充满弹性容器。（仍然受min-width/max-width的控制）

align-content

这个属性会根据在侧轴上的额外空间来排列容器的行，类似于justify-content在主轴在对齐单个弹性项的方式。

注意，这个属性对于只有单行的弹性项来说是没有效果的。

• flex-start ：行会紧靠容器的起始位
• flex-end ：行紧靠容器的结束位
• center ：行紧靠容器的中间位
• space-between ：每行会均匀分布；首行在容器起始处而最后行在容器结束处
• space-around ：每行根据相同的距离均匀的分布
• stretch：每行将会伸展以占用剩余的空间。

子项目属性（Flex items）

order

默认情况下，弹性项目文档流顺序排列。但是，可以使用 order 属性来控制它在 flex 容器中出现的顺序。

.item {

  order: 5; /* default is 0 */

}

flex-grow

它定义了 Flex 项目在必要时的增长能力。它接收一个不带单位的值作为比例。这个值决定了弹性项目可以占用多少空间。如果所有的项目的值都设置为1，那么容器内剩余的空间将会被平均分配给所有的项目。如果其中一个值是2，那么这个项目占据的空间会是其他项目的两倍。

.item {

  flex-grow: 4; /* default 0 */

}

负数无效。

flex-shrink

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

.item {

  flex-shrink: 3; /* default 1 */

}

负数无效。

flex-basis

这定义了，当一个元素在被分配到剩余空间之前的默认大小。它可以是一个长度（如：20%，5rem等）或者一个关键字。auto关键字的意思就是『按照我的宽度和高度属性调整尺寸』（他会暂时根据main-size来布局大小直到被弃用）。如果使用关键字content，意思就是『基于内容调整大小』——不过这个关键字并一定能很好的工作，因此很难去测试或者知晓它的兄弟们max-content，min-content和fit-content做了什么。

.item {

  flex-basis: <length> | auto; /* default auto */

}

如果设置为0，额外空间内容不会被分解开来。如果设置成auto，额外空间会基于它的flex-grow的值进行分布。

felx

这是flex-grow, flex-shrink和flex-basis组合的简写。第二个和第三个参数（flex-shrink和flex-basis）是可选的。默认为0 1 auto，但如果您将其设置为单个数值，则类似于 1 0。

.item {

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

}

推荐你使用的这种缩写属性,这比设置单独属性更好。可以智能的通过缩写形式设置值。

align-self

这个属性可以覆盖单个 align-items设置的对齐方式,或者指定单个项目的对齐方式。

请参阅 align-items 说明以了解可用值。

.item {

  align-self: auto | flex-start | flex-end | center | baseline | stretch;

}