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 不然不生效