FLEX弹性布局_ 初识1
常见父项属性
flex-direction: 设置主轴方向
justify-content: 设置主轴上的子元素排列方式
flex-wrap: 设置子元素是否换行
align-items: 设置侧轴上的子元素排列方式（子项为单行时使用）
align-content: 设置侧轴上的子元素的排列方式（多行）
flex-flow: 复合属性 同是设置flex-direction flex-wrap
常见子项属性
flex: 数字 定义子项目分配剩余空间
align-self: 控制子项自己在侧轴上的排列方式
order：第一个默认为0，数值越小越靠前定义项目排列顺序
flex: 数字 定义子项目分配剩余空间， 用flex来表示占多少份数
flex: 数字 定义子项目分配剩余空间
常见父项属性
flex-direction:设置主轴方向
| 属性值 |
说明 |
| row |
默认值从左到右 |
| row-reverse |
从右到左 |
| column |
从上到下 |
| column-reverse |
从下到上 |
justify-content:设置主轴上的子元素排列方式
| 属性值 |
说明 |
| flex-start |
默认值 从头部开始 |
| flex-end |
从尾部开始 |
| center |
在主轴中对其 |
| space-around |
平分剩余空间 |
| space-between |
先两边贴边 再平分剩余空间 |
flex-wrap:设置子元素是否换行
| 属性 |
说明 |
| nowrap |
默认值，不换行 |
| wrap |
换行 |
align-items:设置侧轴上的子元素排列方式（子项为单行时使用）
| 属性值 |
说明 |
| flex-start |
默认值 从上到下 |
| flex-end |
从下到上 |
| center |
挤在一起居中 |
| stretch |
拉伸（沿着侧轴拉伸） |
align-content:设置侧轴上的子元素的排列方式（多行）
| 属性值 |
说明 |
| flex-start |
默认值 在侧轴的头部开始排列 |
| flex-end |
在侧轴的尾部开始排列 |
| center |
在侧轴中间显示 |
| space-around |
子项在侧轴平分空间 |
| space-between |
子项在侧轴先分布在两头，在平分剩余空间 |
| stretch |
这只子项元素高度平分父元素高度 |
flex-flow:复合属性 同是设置flex-direction flex-wrap
常见子项属性
flex: 数字 定义子项目分配剩余空间， 用flex来表示占多少份数
align-self:控制子项自己在侧轴上的排列方式
order：第一个默认为0，数值越小越靠前定义项目排列顺序
