一、啟動flex布局
在屬性中加入 display:flex;
二、確定flex布局的主軸
flex布局有一條主軸和一條交叉軸，啟用此布局默認是水平的主軸main axis，
使用flex-direction: ；屬性來確定主軸的方向，該屬性有以下四個值
row 水平主軸，起點在左端 || row-reverse 主軸為水平方向，起點在右端
column 主軸為垂直方向，起點在上方 || column-reverse主軸為垂直方向，起點在下方
三、確定換行屬性 flex-wrap: ;
設定了該屬性專案就不會等分容器寬度，而是按照自身的寬度進行排列，排不下的時候就換行
換行也就是一行排不下去了，該屬性有三個屬性值
nowrap不換行
wrap換行
wrap-reverse換行，向上換行
四、前面兩個屬性簡寫flex-flow: ;
flex-flow屬性是flex-direction屬性flex-wrap屬性的簡寫形式
默認值為row nowrap
五、確定主軸方向上的對齊方式 justify-content: ;
該屬性對應五個值分別為
flex-start 左對齊 || center 居中 || flex-end 右對齊
space-around; 每個專案兩側的間隔相等，所以，專案之間的間隔比專案與邊框的間隔大一倍，
space-between; 兩端對齊，專案之間的間隔都相等
space-evenly; 距離兩側的間距和專案之間的間距相等
六、確定在交叉軸的對齊屬性 align-items: ;
flex-start //（默認）交叉軸的起點對齊
flex-end //交叉軸的終點對齊
center //交叉軸的中點對齊
baseline //專案的第一行文字的基線對齊
=====以上全部是設定在容器上的屬性=====
=====以下全部是設定在專案自身屬性=====
七、確定專案排序屬性 order: ;
屬性值0，1，2，3.......該屬性值越小排列越靠前
八、確定專案單獨排列屬性 align-self: ;
屬性值center居中、flex-end靠底端對齊
九、確定專案放大、縮小、主軸方向上的列寬
flex: flex-grow flex-shrink flex-basise;
默認值 0 1 auto
兩個快捷鍵auto(1 1 auto)、none( 0 0 auto)
根據設定的grow、shrink值來進行分配大小，
若是grow和shrink都是1則進行均分專案剩余空間，若都是0則剩余空間不進行分配
由于flex-basise的權重比width、 height的權重要高，所以flex-basise屬性會覆寫前面的主軸方向上的列寬
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270834.html
標籤：Html/Css