Flex

1、块级元素布局是 从上到下 垂直方向 、行内布局是 从左到右 水平方向 、Flex是与方向无关的
2、flex布局可以实现空间自动分配、自动对齐(flexble:弹性、灵活)
3、flex适用于 简单的线性布局 跟复杂的布局要交给grid布局

flex布局：
1、需要父容器display:flex或者inline-flex ie10以上
2、display: flex; 父容器 margin:auto; 子容器 自适应宽度

3、父容器控制子容器的排列方式
4、子容器可以自动扩张 收缩 设置比例 序号 排列次序......

--父容器--

flex-flow: row nowrap; 方向与换行的简写

方向
flex-direction: row 一行排列 从左到右 1 2 3
row-reverse 一行排列 从右到左 3 2 1

    column      一列排列 从上往下 1 2 3
    column-reverse  一列排列 从下到上 3 2 1

换行
flex-wrap: wrap 换行
nowrap 不换行(默认)

主轴对齐方式 从左到右方向 怎么把content对齐
justify-content: space-between 空白放在中间 |图 图 图|
space-around 空白放在元素周围 | 图 图 图 |
flex-start 元素靠在最左边(起点) |图图图 |
flex-end 元素靠在最右边(终点) | 图图图|
center 元素居中 | 图图图 |

侧轴对齐方式 从上到下方向 怎么把items对齐(里面的元素)
align-items: stretch 把所有元素的高度 伸展到最高的那个一样高
flex-start 所有元素靠在最上边 不延伸
flex-end 所有元素靠在最下边 不延伸
center 所有元素居中靠 不延伸
baseline 文字对齐

--子容器--

flex: 1 1 100px 下面对齐三个的缩写

flex-grow:1 元素增大比例 这个元素占据比例1 下个元素占据比例x 空白的空间多出来的时候
flex-shrink:1 元素缩小比例 这个元素缩小比例1 下个元素缩小比例3 父容器太小没有空白的时候 缩小里面items元素比例
flex-basis:100px 默认占据空间大小 (一般不用) 不写的话就是原始大小 写了这个就是设置元素的原始大小占据空间

让每个子元素选择自己的对齐方式 如父容器写的是靠上 这里就可以选择自己靠下
align-self: felx-end 终点对齐
center 居中对齐

顺序
order:1 把这个子元素放到顺序第几位去 (代替双飞翼) 其他的元素也要设置2/3 不然不生效