flex 布局
彈性布局
flex 布局原理
flex 是fkexible Box 的縮寫，意為“彈性布局”，用來為盒裝模型提供最大的靈活性，任何一個容器都可以被指定為flex布局
- 當我們為父盒子設為flex布局以后，子元素的float、clear、和vertical-align屬性將失效。
- 子容器可以橫向排列，也可以縱向排列
- 布局原理：通過給父盒子添加flex屬性，來控制子盒子的位置和排列方式
flex布局父項常見屬性
主軸與側軸：
在flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸
- 默認主軸方向就是X軸方向，水平向右
- 默認側軸方向就是Y軸方向，垂直向下
flex-direction：設置主軸方向
flex-direction 屬性決定主軸的方向（即項目的排列方向）；注意：主軸和側軸是會變化的，就看flex-direction 設置誰為主軸，剩下的就是側軸。而我們的子元素是跟着主軸來排列的。
屬性值
- row :默認值從左到右
- role-reverse：從右到左
- column：從上到下
- column-reverse：從下到上
justify-content：設置主軸上的子元素排列方式
justify-content 屬性定義了項目在主軸上的對其方式；使用前需要先確定主軸是哪個
屬性值
- flex-start:默認值 從頭部開始，如果主軸是x軸，則從左到右
- flex-end:從尾部開始排列
- center:在主軸居中對齊（如果租住是x軸則水平居中）
- space-around:平分剩余空間
- space-between:先兩邊貼邊，再平分剩余空間（重要）
flex-wrap ：設置子元素是否換行
默認情況下，項目都排在一條線（又稱為：“軸線”）上。flex-warp 屬性定義，flex不居中默認是不換行的 如果裝不下，會縮小子元素的寬度放到父元素里面。
屬性值
- nowarp：默認不換行
- warp： 換行
align-content:設置側軸上的子元素排列方式（多行）
該屬性是控制子項在側軸（默認是Y軸）上的排列方式，只能用於子項出現換行的情況（多行）單行下是沒有效果的。在子項為單項的時候使用；
屬性值
- flex-start:默認值 從上到下
- flex-end:從下到上
- center:擠在一起居中（垂直居中）
- stretch:拉伸（但是不要設置高度）
- space-around：子項在側軸平分剩余空間
- space-between：子項在側軸先分布在兩頭，再平分剩余空間
align-items 設置側軸上的子元素排列方式（單行）
該屬性是控制子項在側軸（默認是y軸）上的排列方式，在子項為單項的時候使用
屬性值
- flex-start ：默認值從上到下
- flex-end：從下到上
- center：擠在一起居中（垂直居中）
- stretch：拉伸
flex-flow:復合屬性，相當於同時設置了flex-direction 和flex-wrap
把設置主軸方向和是否換行（換列）簡寫
- flex-flow：row wrap
flex布局 子項常見屬性
- flex子項占有的份數
- align-self 控制子項自己在側軸的排列方式
- order 屬性定義子項的排列順序（前后順序）
Flex屬性
flex屬性定義子項目分配剩余空間，用flex來表示占多少份數。數值越大，分配的越多
align-self屬性
控制子項自己在側軸上的排列方式；align-self 屬性允許單個項目有與其他項目不一樣的對其方式，可覆蓋align-item屬性，默認值為auto，表示集成父元素的align-items屬性，如果沒有父元素，則等同於stretch
=