flex布局
- 采用flex布局的元素，称为flex容器，它的子元素称为flex项目
- flex布局原理：给父盒子添加flex属性，控制子盒子的位置和排列方式
常见父项属性
-
flex-direction:设置主轴的方向
在flex 布局中，分为主轴和侧轴两个方向
默认主轴方向是X轴方向，水平向右 flex-direction :row
默认侧轴方向是Y轴方向，水平向下
属性值：
row :默认从左到右
row-reverse:从右到左
column：从上到下
column-reverse :从下到上
-
justify-content: 设置主轴子元素的排列方式
使用之前要确定主轴是哪一个
属性值：
flex-star: 默认值 如果主轴是x轴，从左到右排列
flex-end: 从尾部开始排列
cneter: 主轴居中对齐
space-between: 两边贴边，平分剩余空间
space-around : 平分剩余空间
-
flex-wrap：控制子元素是否换行
默认情况下，项目排在一条线上，默认不换行
flex-wrap : wrap 换行
flex - wrap :nowrap 不换行
-
align-content: 设置侧轴子元素的排列方式（多行）
-
alingn-items：设置侧轴子元素的排列方式（单行）
在子项为单项式使用
flex- start ：从上到下
flex- end : 从下到上
center :垂直居中
-
flex - flow : 复合属性，是flex-direction 和flex- wrap 的简写
justify-content 与 flex-direction 区别
默认排列方式是1 2 3
常见子项属性
flex : 子项平分剩余空间
align-self ：控制子项自己在侧轴的排列方式
span:nth-chile(2){
align-self:flex-end
}
order ： 定义子项的排列顺序 默认值是 0 数值越小越靠前
