FlexBox布局详解
背景
在Flexbox Layout（柔性盒）模块（目前是W3C最后呼叫工作草案）旨在提供一个更有效的方式来布置，调整和项目之间在一个容器中分配空间，即使它们的大小是未知的和/或动态的（因而词“柔性”）。 flex布局背后的主要思想是赋予容器更改其项目的宽度/高度（和顺序）以最好地填充可用空间（主要适应各种显示设备和屏幕大小）的能力。柔性容器可扩展项目以填充可用空间，或缩小它们以防止溢出 最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直方向的块和基于水平方向的内联块）。虽然这些工作对于页面很有效，但它们缺乏灵活性（无双关语）来支持大型或复杂应用程序（尤其是在改变方向，调整大小，拉伸，缩小等方面）。 注意： Flexbox布局最适合应用程序的组件和小型布局，而网格布局适用于大型布局。
基础知识和术语
- 由于flexbox是一个完整的模块，而不是一个单独的属性，因此它涉及很多事情，包括整套属性。其中一些是为了在容器上设置（父元素，称为“弹性容器”），而其他则是为了在子项上设置（称为“弹性项目”）。
如果常规布局基于块流向和内联流向，则柔性布局基于“柔性流动方向”。请从规范中查看这个数字，解释flex布局背后的主要思想。
基本上，项目将被布置以下任一main axis（从main-start至main-end）或十字轴（从cross-start至cross-end）。
主轴 - 柔性容器的主轴是柔性项目布局的主要轴。当心，它不一定是水平的; 这取决于flex-direction财产（见下文）。
main-start | main-end - 弹性项目放置在容器中，从主启动开始到主要结束。 主尺寸 -
柔性物品的宽度或高度，以主尺寸为准，是物品的主尺寸。Flex项目的主尺寸属性是“宽度”或“高度”属性，以主维度中的哪一个为准。横轴 - 垂直于主轴的轴称为横轴。它的方向取决于主轴的方向。
跨开始| 交叉 - 弯曲线充满物品并从弯曲容器的交叉起始侧开始放置到容器中并朝向交叉端侧。
十字尺寸 - 弹性物品的宽度或高度，以交叉尺寸为准，是物品的交叉尺寸。交叉大小属性是交叉维度中的“宽度”或“高度”中的任何一个。
第一大类：父级属性
父级（flex容器）的属性
- 显示
这定义了一个flex容器; 内联或块取决于给定的值。它为所有直接的孩子提供了一个弹性环境。
.container {
display: flex; /* or inline-flex */
}- flex-direction
这建立了主轴，从而定义了柔性物品放置在柔性容器中的方向。Flexbox是（除了可选包装）单向布局概念。将flex项目视为主要布置在水平行或垂直列中。
.container {
flex-direction: row | row-reverse | column | column-reverse;
}- row（默认）：从左到右在ltr; 从右到左rtl
- row-reverse：从右到左ltr; 从左到右在rtl
- column：相同row但从上到下
column-reverse：相同row-reverse但从下到上
flex-wrap
默认情况下，flex项目都将尝试适合一行。你可以改变它，并允许项目根据需要用这个属性进行包装。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}- nowrap （默认）：所有弹性项目将在一行上
- wrap：flex项目将从上到下包装成多行。
wrap-reverse：flex项目将从下到上包装成多行。
flex-flow（适用于：父Flex容器元素）
这是一个简写flex-direction和flex-wrap属性，它们一起定义了柔性容器的主轴和交叉轴。默认是row nowrap。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>- justify-content
这定义了沿主轴的对齐。当一条线上的所有弹性物品都不灵活或灵活但达到其最大尺寸时，它有助于分配剩余空间。当物品溢出时，它也对物品的对齐进行控制。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}- flex-start （默认）：项目打包到起始行
- flex-end：项目被打包到结束行
- center：物品沿着这条线居中
- space-between：项目均匀分布在行中; 第一项是在起始行，最后一项是最后一行
- space-around：物品均匀分布在线上，周围有相同的空间。请注意，视觉上空间不相等，因为所有物品在两侧都有相同的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单元，因为下一个项目有其自己的间距。
- space-evenly：项目是分布式的，以便任何两个项目之间的间距（以及到边缘的空间）是相等的。
- align-items
这定义了flex项目沿当前行的横轴放置的默认行为。把它看作是justify-content横轴（垂直于主轴）的版本。
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}- flex-start：项目的跨起始边缘边缘放置在交叉起始线上
- flex-end：物品的交叉边缘边缘放置在交叉线上
- center：项目以交叉轴为中心
- baseline：项目对齐，比如他们的基线对齐
stretch （默认）：拉伸填充容器（仍然尊重最小宽度/最大宽度）
align-content
当横轴上有额外的空间时，这会将柔性容器的线justify-content对齐，类似于如何在主轴内对齐单个项目。
注意：只有一行柔性项目时，此属性不起作用。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}- flex-start：将行打包到容器的起始处
- flex-end：将行打包到容器的末端 center：包装在容器中心的线条
- space-between：线条均匀分布; 第一行是容器的开始，而最后一行是末尾
- space-around：在每条线周围均匀分布均匀空间的线
- stretch （默认）：线拉伸占据剩余空间
第二大类：弹性项目（子类属性）
默认情况下，Flex项目按源代码顺序排列。但是，该order属性控制它们出现在柔性容器中的顺序。
.item {
order: - flex-grow
这定义了Flex项目在必要时增长的能力。它接受作为比例的无单位价值。它规定了该项目应该占用的柔性容器内的可用空间量。
如果所有项目都flex-grow设置为1，则容器中剩余的空间将平均分配给所有孩子。如果其中一个孩子的值为2，剩余空间将占用其他空间的两倍（或至少会尝试）。
.item {
flex-grow: - flex-basis
这将在分配剩余空间之前定义元素的默认大小。它可以是一个长度（例如20％，5rem等）或关键字。该auto关键字的意思是“看看我的宽度或高度属性”（暂时由main-size关键字完成，直到弃用）。该content关键字的意思是“它根据项目的内容大小”
-此关键字不能很好地支持呢，所以很难进行测试，并更难知道它的兄弟max-content，min-content和fit-content做。
.item {
flex-basis: | auto ; /* default auto */
}如果设置为0，则不会考虑内容的额外空间。如果设置为auto，多余空间将根据其flex-grow值分配。
- align-self
这允许align-items为各个弹性项目覆盖默认对齐方式（或由其指定的对齐方式）。
请参阅align-items说明以了解可用值。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}请注意float，clear并且vertical-align对Flex项目没有影响。
简单的例子
完美集中问题。如果您使用flexbox，它不会更简单。
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}这依赖于在柔性容器中设置为“auto”的边距吸收额外空间的事实。所以设置一个垂直边距auto将会使物品在两个轴上都完美居中。
想象一下，我们在我们网站的最顶端有一个右对齐的导航，但我们希望它以中型屏幕为中心，并在小型设备上单列。很简单。
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}