>[danger] 彈性布局 --- 使用display: flex; 標簽 為 (伸縮容器), 每個子元素為 (伸縮項目), 子元素的浮動 / vertical-align失效 >[info]父元素內: * flex-direction 項目排列方向 * flex-wrap 一條線排列不下, 如何換行 * flex-flow 是上面2個屬性的復合寫法? * justify-content 在主軸對齊方式 * align-items 交叉軸方向(與主軸對立那個)對齊方式 * align-content 多根交叉軸方向對齊方式(一般flex-wrap配合用), 值與justify-content相等 --- * flex-direction的值: * row（默認值）：主軸水平方向，起點左端 * row-reverse：主軸水平方向，起點右端 * column：主軸垂直方向，起點上端 * column-reverse：主軸垂直方向，起點下端 * flex-wrap的值: * nowrap: 不換行 * wrap: 換行 (第一行在上方) * wrap-reverse: 換行 (第一行在下方) * justify-content的值: (主軸) * flex-start: 排列方向起點對齊 * flex-end: 排列方向終點對齊 * center: 居中 * space-between: 兩端對齊, 元素之間有空隙 * space-around: 項目用空隙環繞, 元素之間是端的二倍空隙 * align-items的值: * flex-start：交叉軸的起點對齊 * flex-end：交叉軸的終點對齊 * center：交叉軸的中點對齊 * baseline: 元素的第一行文字的基線對齊 * stretch(默認值)：如果項目未設置高度或設為auto，將占滿整個容器的高度 >[info]子元素內: * flex 彈性元素如何伸長或縮短, 適應flex容器中的可用空間 * flex-grow 有剩余空間的時候，分配給元素的比例 * flex-shrink 空間不足的時候，元素縮小的比例, 如果給0, 則不縮小 (用的少) * flex-basis 分配空間之前，元素占據主軸的空間, 默認值auto, 項目原本大小 * order 按照數值(默認0), 由小到大, 根據父級指定排列方向, 正向排列 * align-self 單獨設置排列方式覆蓋繼承的, 默認繼承于父級align-items ---- * flex: 復合寫法: flex-grow flex-shrink flex-basis * 表格如下 | flex 值 | 相當于flex-grow, flex-shrink, flex-basis 對應的值 | | --- | --- | | flex: 1 | flex: 1 1 0 | | flex: 100px| flex: 1 1 100px | |flex: 默認值 | flex: 0 1 auto| |flex: auto | flex: 1 1 auto| |flex: none | flex: 0 0 auto | * flex-grow: 有剩余空間的時候，分配給元素的比例 * 例1: 三個flex-grow: 1(等同三個flex: 1)效果 * 例2: 中間的flex-grow值2, 左右都為1, 效果: * 例3: 中間的flex的值: 2, 左右的flex值1 效果 > 講解上面圖片, 分配空間步驟 --- 例2: flex-basis: 默認auto; 元素本身的大小 so, 剩余的空間 = 父級寬度 - 元素本身大小 * 3(個span) 剩余空間分4份, 左右為1份, 中間的2份, 每個span還得算上原本的大小 例3: flex-basis: 看上面表格為0, 所以不考慮自身大小, 直接把父級寬度 / 3, 每個人分配 * order: 按照數值(默認0), 由小到大, 根據父級指定排列方向, 正向排列  --- >[danger] 最忠誠的建議 --- 建議優先使用flex復合寫法, 會自己推斷3個屬性的值