flex布局2

今天主要对flex进行重新说明以及补充，首先给大家介绍一下什么是flex布局：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。下面具体介绍一下布局方式

display: flex;对弹性容器设置

flex-direction:row | row-reverse | column

可以改变flex容器的方向

• row定义主轴方向为X轴从左到右
• row-reverse 从右到左
• column 定义主轴方向为Y轴从上到下
• column-reverse 定义主轴方向为Y轴从下到上

justify-content flex-start | flex-end | center | space-between | space-around

• flex-start:从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
• flex-end: 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐;
• center:伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同
• space-between : 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
• space-around:在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

flex-wrap:wrap | nowrap | wrap-reverse

• nowrap:flex 的元素被摆放到到一行
• wrap: flex 元素被打断到多个行中，会根据上面设置的属性排列
• wrap-reverse :和 wrap 的行为一样,但会与原来的方向相反

align-items:stretch | flex-start | flex-end | center | baseline

• stretch默认值。项目被拉伸以适应容器
• flex-start项目位于容器的开头
• flex-end项目位于容器的结尾
• center项目位于容器的中心。
• baseline项目位于容器的基线上

对弹性项目进行设置

• order:;设置排列顺序 默认为0，必须为整数
• flex-grow 按比例分配容器的宽度，不能设置宽度
• flex-shrink:总宽大于容器按比例分配容器的宽度缩小
• flex-basis:当成宽度
• flex：组合 flex-grow | flex-shrink | flex-basis 默认值为(0 1 auto)
• align-self: auto | flex-start | flex-end | center | baseline | stretch;针对当前自身设置的默认值：stretch，与弹性容器的align-items类似。

结束语

我对他们的了解就那么多，希望有所帮助。