持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第 10 天，点击查看活动详情
一、基本概念
1.1 flexbox 是什么
CSS3 的新布局模式，是一种当页面需要适应不同屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
flex 弹性盒是一个一维布局模型，可以在界面中的项目之间提供空间分布和强大对齐功能的布局方式。
所谓一维布局模型是指：flex 在同一时刻只控制行或列。这和二维布局模型 Grid Layout （同时控制行和列）相反。
1.2 flexbox 的两个轴
flexbox 有两个轴——主轴和交叉轴。主轴由 flex-direction 属性定义，而交叉轴和主轴垂直。对 flexbox 做的一切操作都涉及到这两个轴，flexbox 的特点是可以将内容沿着主轴或交叉轴对齐和调整。
1.3 起始线和终止线
flexbox 不会对文档的书写模式提供假设。过去，CSS 的书写模式主要被认为是水平的，从左到右的。现代的布局方式涵盖了书写模式的范围，所以不再假设一行文字是从文档的左上角开始向右书写, 新的行也不是必须出现在另一行的下面。
1.4 flex 容器和项目
文档中采用了 flexbox 的区域就叫做 flex 容器（简称”容器“）。为了创建容器， 我们把一个容器的 display 属性值改为 flex （块级）或者 inline-flex（行级） 。完成这一步之后，容器中的直系子元素就会变为 flex 项目（简称“项目”）。
二、容器属性
以下都是父元素的属性。
flex-direction：决定主轴方向（即项目的排列方向）flex-wrap：决定项目是否换行flex-flow：flex-direction和flex-wrap的简写justify-content：项目在主轴上的对齐方式align-items：项目在交叉轴上的对齐方式align-content：控制多行项目的对齐方式
2.1 flex-direction
flex-direction 决定主轴方向、起始线和终止线位置。
它有四个取值：
row（默认）：主轴方向为水平方向，主轴的起始线是左边，终止线是右边row-reverse：主轴方向为水平方向，主轴的起始线和终止线位置交换column：主轴方向为垂直方向，主轴的起始线是上边，终止线是下边column-reverse：主轴方向为垂直方向，主轴的起始线和终止线交换
使用场景：网页整体布局、导航栏等等
2.2 flex-wrap
flex-wrap 决定 flex 项目是否换行，可实现多行 flex 容器，这样做时，应把每行都看作一个新的 flex 容器。
默认情况下子元素是不换行的，如果一条轴线排不下，就可以设置它来换行。
属性值：
nowrap（默认）：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
2.3 flex-flow
flex-flow 是 flex-direction 和 flex-wrap 的简写，表示 flex 布局的流动特性。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap。默认值当然是 row nowrap。
2.4 justify-content
justify-content 决定项目在主轴上的排列（对齐）方式（属性决定了水平方向子项的对齐和分布方式）。
有以下取值：
flex-start（默认值）：起始线对齐（项目从容器的起始线开始排列）flex-end：终止线对齐（项目从容器的终止线开始排列）center：居中对齐space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半space-between：两端对齐，项目之间的间隔都相等，between是中间的意思，意思是多余的空白间距只在元素中间区域分配space-evenly：均匀分布每个项目，每个flex子项两侧空白间距完全相等，项目之间的间隔和项目与边框之间的间隔相等
2.5 align-items
align-items 定义项目在交叉轴上的排列（对齐）方式。
取值：
-
stretch（默认值）：如项目没有设置高度，或者高度为 auto，则占满整个容器 -
flex-start：起始线对齐 -
flex-end：终止线对齐 -
center：居中对齐 -
baseline： 项目的第一行文字的基线对齐
2.6 align-content
align-content 用于控制多行项目的对齐方式，如果项目只有一行则不会起作用。
取值：
stretch（默认值）：即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似flex-start：与交叉轴起始线对齐flex-end：与交叉轴的终点对齐center：与交叉轴的中点对齐space-between：同上space-around：同上space-evenly：同上
三、项目属性
项目属性针对子元素。
order：定义项目的排列顺序flex-grow：定义项目放大比例flex-shrink：定义了项目的缩小比例flex-basis：设置项目宽度flex：简写属性align-self：控制单个项目在交叉轴上的排列对齐方式
3.1 order
order 属性定义项目的排列顺序，数值越小，排列越靠前。
取值：
- 默认为 0，取值为整数
3.2 flex-grow
flex-grow 定义项目放大比例，放大的前提是父元素有足够空间。实际上是定义子元素占容器空间的份数。若没定义此属性，则空间按自己本身内容撑开。
grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。
注意：即使设置了固定宽度，若有剩余空间依旧会放大。
取值：
- 默认为0，不放大，取值为数值
3.3 flex-shrink
flex-shrink 定义项目缩小比例，默认为1，即如果空间不足，该项目将缩小。
注意：即使设置了固定宽度，也会缩小。
但如果某个项目的 flex-shrink 属性设置为 0 ，即使空间不足，自身也不缩小。
取值：
- 默认为1，正数
3.4 flex-basis
用于设置项目宽度，定义了在分配剩余空间之前元素的默认大小。默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖width属性。
实际上不建议对flex子项使用
width属性，因为不够弹性。
取值：
- 默认为 auto
3.5 flex
flex 属性是 flex-grow ，flex-shrink 与 flex-basis 三个属性的简写，用于定义项目放大，缩小与宽度。默认为 flex: 0 1 auto；后两个属性值可以简写。
常用：flex: 1 等分容器空间。
3.6 align-self
align-self 指控制单独某一个 flex 子项的垂直对齐方式，写在 flex 容器上的这个 align-items 属性，后面是 items，有个 s，表示子项们，是全体；这里是 self，单独一个个体。其他区别不大，语法几乎一样：
align-self: auto | flex-start | flex-end | center | baseline | stretch;
唯一区别就是align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。其他属性值含义一模一样。
