Flex弹性容器

1.flex弹性布局

可以让我们的盒子并排显示，并且也可以让行内元素转换为行内块元素 。使用：在父盒子上添加属性  display:flex。flex 布局， 使用时要注意 自己的主轴和侧轴的设置，因为一般情况下 默认的主轴为X轴的方向，侧轴为y轴方向。

2.flex容器

所有子元素自动成为 flex项目（flex item）简称项目。子元素可横向排列 也可纵向排列，原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。通常使用在移动端， pc端会有兼容性的问题，不同浏览器 不同版本会有兼容性问题。

3.flex父元素的属性

（1）：flex-direction : 设置主轴方向，默认主轴方向为x轴方向，也可设置y轴为主轴。

row(默认的值):flex 容器的主轴被定义为与文本方向相同。主起点和主终点与内容方向相同。

row-reverse：行为相同，row但主起点和主终点与内容方向相反。

column：flex 容器的主轴与块轴相同。主起点和主终点与写模式的前后点相同。

column-reverse：行为相同，column但main-start和main-end与内容方向相反。

（2）：justify-content：设置主轴上子元素的排列方式 , 使用前先确定好主轴方向。定义了浏览器如何沿着 flex 容器的主轴和网格容器的内联轴justify-content在内容项之间和周围分配空间。

flex-start：根据 flex 容器的 main-start 侧，这些项目朝向对齐容器的边缘彼此齐平地打包。这仅适用于 flex 布局项。对于不是 flex 容器子项的项目，此值被视为start。

flex-end：根据 flex 容器的 main-start 侧，这些项目朝向对齐容器的边缘彼此齐平地打包。这仅适用于 flex 布局项。对于不是 flex 容器子项的项目，此值被视为start。

center：物品沿着主轴朝向对齐容器的中心彼此齐平地包装。

space-around：项目沿主轴均匀分布在对齐容器内。每对相邻项目之间的间距是相同的。第一项之前和最后一项之后的空白空间等于每对相邻项之间空间的一半。

space-between：项目沿主轴均匀分布在对齐容器内。每对相邻项目之间的间距是相同的。第一项与主开始边缘齐平，最后一项与主结束边缘齐平。

（3）：flex-wrap：设置子元素是否换行， 布局中默认不换行。设置弹性项目是强制放在一行上还是可以换行到多行上。如果允许换行，它会设置行堆叠的方向。

nowrap：弹性项目被布置在单行中，这可能会导致弹性容器溢出。取决于值，交叉启动等同于启动或之前flex-direction。这是默认值。

wrap：弹性项目分成多行。cross-start或等价于start或在依赖flex-direction值之前，而cross -end与指定的cross-start相反。

（4）：align-items：设置侧轴上的子元素排列方式（单行）。将所有直接子级的值align-self设置为一个组。在 Flexbox 中，它控制Cross Axis上项目的对齐方式。在网格布局中，它控制块轴上项目在其网格区域内的对齐方式。

flex-start：弹性项目的交叉起始边距边缘与线的交叉起始边缘齐平。

flex-end：弹性项目的交叉端边距边缘与线的交叉端边缘齐平。

center：弹性项目的边距框位于横轴上的直线的中心。如果 item 的 cross-size 大于 flex 容器，它将在两个方向上均等地溢出。

stretch：Flex 项目被拉伸，使得项目的边距框的横向大小与线相同，同时尊重宽度和高度限制。（使用时 子项目不设置高度，使用较少）。

（5）：align-content：设置侧轴