1.flex布局原理
flex是flexible Box的縮寫(xiě)钞澳，意為“彈性布局”，用來(lái)為盒狀模型提供最大的靈活性凯肋，任何一個(gè)容器都可以指定為flex布局。
- 當(dāng)我們?yōu)楦负凶釉O(shè)為flex布局以后叹话，子元素的float，clear和vertical-align屬性失效
- 伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 = flex布局
概括flex布局原理：
就是通過(guò)給父盒子添加flex屬性墩瞳，來(lái)控制子盒子的位置和排列方式
2.常見(jiàn)父項(xiàng)屬性
以下由6個(gè)屬性是對(duì)父元素設(shè)置的
- flex-direction：設(shè)置主軸的方向
- justify-content：設(shè)置主軸上的子元素排列方式
- flex-wrap：設(shè)置子元素是否換行
- align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）
- align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）
- flex-flow：復(fù)合屬性驼壶，相當(dāng)同時(shí)設(shè)置了flex-directtion和flex-wrap
2.1主軸與側(cè)軸
在flex 布局中，是分為主軸和側(cè)軸兩個(gè)方向喉酌，同樣叫法有：行和列热凹，x軸和y軸
2.2 flex-direction設(shè)置主軸的方向
flex-direction屬性決定主軸的方向（即項(xiàng)目的排列方向）
注意：主軸和側(cè)軸是會(huì)變化的，就看flex-direction設(shè)置誰(shuí)為主軸泪电，剩下的就是側(cè)軸般妙。而我們的子元素是跟著主軸來(lái)排列的
- row 默認(rèn)值從左到右
- row-reverse 從右到左
- column 從上到下
- column-reverse 從下到上
2.3 fustify-content 設(shè)置 主軸 上的子元素排列方法
justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式
注意：使用這個(gè)屬性之前一定要確定好主軸是哪個(gè)
- flex-star 默認(rèn)值從頭部開(kāi)始 如果主軸是x軸，則從左到右
- flex-end 從尾部開(kāi)始排列
- center 在主軸居中對(duì)齊（如果主軸是x軸則水平居中）
- space-around 平分剩余空間
- space-between 先兩邊貼邊 再平分剩余空間（重要）
