弹性布局可能是当今开发中最常用的布局，它是一种设置的一维布局display: flex | inline-flex，您可以将元素视为一个容器，容器中的每个项目都称为 Flex 子项。 对于 flex，有纺锤跟十字轴主轴是一条水平线，交轴垂直于主轴，因此是垂直的。 主轴可以通过的位置flex-direction属性设置。
flex的性质可以分为两类，一是它作用于整体器皿另一种类型作用于容器每个孩子目标。 作用于容器的主要属性包括：
flex-direction 控制容器的布局方向，从左到右、从右到左或从上到下
row：默认值，按正常文档流方向从左到右排列元素row-reverse：跟row在相反的方向column：在列中显示元素，类似于块column-reverse：方向与列相反，flex-wrap 控制子元素是显示在单行还是新行中。 取值范围：
no-wrap：默认值，无换行符wrap：环绕显示wrap-reverse：从下到上包裹和排列元素 flex-flowflex-direction跟flex-wrap缩写，例如：flex-flow: row wrap
justify-content 控制元素在水平方向上的对齐和排列，主要值为：
flex-start：按照正常的文档流，它似乎是左对齐的flex-end：按照正常文档流对齐，如右对齐所示center：中心对齐，在通常的显影中最常用space-between：两端对齐，左右两侧无间隙space-around：与末端对齐类似，但左右两侧有空间，空间为中间自由部分的一半space-evenly：align-items 控制元素在垂直方向上的对齐和排列
stretch：孩子高度紧张flex-start：按照正常的文档流程与顶部对齐flex-end：按照正常的文档流对齐，作为底部对齐center：居中对准，常用于垂直对中baseline：所有子元素都相对于基线（即字母）对齐xalign-content 属性的下边缘相同align-items区别在于多条线，它控制每行中子项的垂直对齐和排列方式。 主要值如下：
stretch：默认，每行以相等的比例拉伸flex-start：多个元素顶部对齐flex-end：多个元素底部对齐center：整体垂直居中space-between：上下行两端对齐，中间元素一分为二space-around：每行元素的上方和下方都有独立的空间，不会重叠space-evenly：应用于每行元素中 flex 子项的属性在上下平均分配：
order 属性主要用于更改子元素安排位置，该值为整数，默认值为 0，顺序从小到大排序。 例如，-1 的阶数高于 1 的阶数。
order: 0order: -1flex-grow: 1flex-shrink: 0auto，这意味着如果有设定的宽度，则根据设置进行设置，如果没有，则根据元素实际占用的空间进行显示。
flex 是一个属性flex-growflex-shrink跟flex-basis通常建议使用缩写属性，这允许浏览器自动计算其他值，而不是显式指定每个 flex 属性。 下面列出了 flex 的几个值"应用"部分。
align-self 单独控制子项的垂直对齐方式，其值与align-items相同，只是一个用于所有项目，一个用于单个项目。
align-self: auto | flex-start | flex-end | center | baseline | stretchflex此属性的几个值是熟悉的。 以下是 flex 的几个常见值：
flex: initial：相当于flex: 0 1 auto是 flex 属性的缺省值。 这意味着有剩余空间并且不会扩展元素，但是当没有足够的空间时，元素会收缩，至于元素大小，它会适应它实际占用的内容的宽度。 适用于两列自适应布局，一侧宽度固定，另一侧自动内容flex: 0：相当于flex: 0 1 0%，表现为元素不会展开，而是在空间不足时收缩，大小为最小内容宽度，效果是文本垂直排列成一列，挤在一起。 flex: none：相当于flex: 0 0 auto，表现为元素既不收缩也不展开，元素大小为最大内容宽度。 此设置的效果是，无论容器的宽度如何，元素都会显示，并且会一直显示到最后而不换行，因此容器可能会溢出。 比较适合一些失去灵活性的场景，比如一个列表，左边是文字**，右边是按钮，我们希望这个按钮里的文字不要换行，左边没有积压，可以设置按钮flex: noneflex: 1：相当于flex: 1 1 0%，这意味着元素可以展开或收缩，元素的大小是最小内容宽度，即当宽度不足时，文本将以换行方式显示。 这适用于：划分布局flex: auto：相当于flex: 1 1 auto，这意味着该元素可以扩展或收缩，当内容空间不足时，该元素会向外扩展并占据更多的空间，即抢占其他子元素的空间。 其应用场景：Web 导航栏，因为导航栏经常与多个子项一起使用，但每个子项中的文本量并不固定flex:auto您可以根据内容自动分配宽度。