flex布局
任何一個容器都可以指定為flex布局
當父盒子設為flex布局后，子元素的float、clear、vertical-align屬性將失效
伸縮布局=彈性布局=伸縮盒布局=彈性盒布局=flex布局
采用flex的元素，稱為Flex容器（flex container）簡稱”容器“，
它的所有子元素自動成為容器成員，成為Flex專案（flex item）簡稱“專案”
啟用flex布局：給標簽加上樣式：display:flex;
如果沒有設定，是沒有flex布局的！！！！！
常見的父項屬性：
1、flex-direction設定主軸方向
flex布局，分為主軸和側軸方向也稱行和列、x軸和y軸
默認主軸方向就是x方向，水平向右
默認側軸方向就是y方向，水平向下
元素跟著主軸排列
屬性值：row：默認，為水平方向,相當于float:left
row-reverse：水平反方向，相當于float:right，即從右到左
column：垂直方向，即從上到下
column-reverse：垂直反方向，即從下到上
2、justify-content 設定主軸上的子元素排列方式
使用該屬性之前一定要確定好主軸方向
屬性值：flex-start：默認值，從頭部開始，如果主軸是x軸，則從左到右；如果主軸是Y軸，則從上到下
flex-end：從尾部開始排列，如果主軸是x軸，則子元素貼著右邊，但是順序不變 ，如果主軸是y軸，子元素就貼著下邊
center：在主軸居中對齊（如果主軸是X軸則水平居中）
space-around：平分剩余空間，平分父元素的空間，每個子元素之間的間距一樣
space-between：先兩邊貼邊，再平分剩余空間：父元素里面的子元素兩邊貼著邊緣，剩余的子元素平分剩下的空間
3、flex-wrap 設定子元素是否換行
默認情況下，子元素是不換行的，如果父元素一行裝不下，會縮小子元素的寬度，放到父元素空間里面，
屬性值：nowrap：默認值，不換行
wrap：換行
4、align-items設定側軸（默認側軸為y軸）上的子元素排列方式（單行）
設定子項在側軸上的排列順序，用于子元素是單行的情況下，即子元素不換行
屬性值：flex-start：默認值，從側軸的頭部開始排列
flex-end：從側軸的尾部開始排列
center：在側軸中垂直居中顯示
stretch：拉伸：如果子元素設定高度，設定stretch就沒有變化，只有當子元素沒有設定高度或者高度等于auto時，子元素的高度會被拉伸到和父元素一樣高
baseline：各個Flex Item相對于基線對齊，
A .若Flex Item內部沒有任何文本內容，則Flex Item在Flex Container的頂端 且各個Flex Item之間底部對齊， B .若Flex Item內部具備文本內容，則各個Flex Item相對于文本基線對齊
5、align-content 設定側軸上的子元素的排列順序（多行）
設定子項在側軸上的排列順序，只能用于多行的情況下，即子元素換行，在單行情況下沒有效果
屬性值：flex-start：默認值，從側軸的頭部開始排列
flex-end：從側軸的尾部開始排列
center：在側軸中垂直居中顯示
space-around：子項在側軸平分剩余空間
space-between：子項在側軸先分布在兩頭，再平分剩余空間
stretch：設定子項元素高度平分父元素高度，跟單行效果差不多，如果子元素設定高度，設定stretch就沒有變化，只有當子元素沒有設定高度或者高度等于auto時，子元素才會平分父元素的高度
*****注意align-items和align-content的區別
flex-flow屬性是flex-direction和flex-wrap屬性的復合屬性，相當于flex-direction和flex-wrap的簡寫
例如：flex-flow:row wrap;
子項常見屬性
1、flex屬性
定義子專案分配剩余空間，用flex來表示占多少份數
flex: <number>; // flex 的值是數字
flex:1;
2、align-self控制子項自己在側軸的排列方式
align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可以覆寫align-items屬性
例如：align-self:flex-end;
3、order屬性定義子項的排序順序（前后順序）
數值越小，排列越靠前，默認值為0
例如order: -1;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7098.html
標籤：Html/Css
上一篇：阿里巴巴矢量圖示庫的使用