這一章節我們來學習align-items屬性,本屬性定義了項目在交叉軸上的對齊方式。屬性值分別為:
align-items: flex-start | flex-end | center | baseline | stretch;
結合右側編輯器中的布局以及下面的樣式設置進行理解:
flex-start
:默認值,左對齊
.box { height: 700px; background: blue; display: flex; align-items: flex-start; }
實現效果:
flex-end
:交叉軸的終點對齊
.box { height: 700px; background: blue; display: flex; align-items: flex-end; }
實現效果:
center
: 交叉軸的中點對齊
.box { height: 700px; background: blue; display: flex; align-items: center; }
實現效果:
baseline
:項目的第一行文字的基線對齊。
.box { height: 700px; background: blue; display: flex; align-items: baseline; }
三個盒子中設置不同的字體大小,可以參考右側編輯器中的代碼進行測試。
實現效果:
stretch(默認值)
:如果項目未設置高度或設為auto,將占滿整個容器的高度。
.box { height: 300px; background: blue; display: flex; align-items: stretch; } .box div { /*不設置高度,元素在垂直方向上鋪滿父容器*/ width: 200px; }
實現效果:
自己按照上面的代碼測試,感受下各個屬性值實現的樣式。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報