課程
/前端開發(fā)
/HTML/CSS
/十天精通CSS3
flex布局中
align-items與align-content有什么區(qū)別那
2016-04-04
源自:十天精通CSS3 10-9
正在回答
align-items屬性定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch(默認值):如果項目未設(shè)置高度或設(shè)為auto,將占滿整個容器的高度
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(默認值):軸線占滿整個交叉軸。
align-content 屬性在當靈活容器內(nèi)的各項沒有占用交叉軸上所有可用的空間時對齊容器內(nèi)的各項(垂直)。
center 項目位于容器的中心。 ? ?
align-items 屬性規(guī)定靈活容器內(nèi)的各項的默認對齊方式。
提示:使用每個項目的 align-self 屬性可重寫 align-items 實現(xiàn)。
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網(wǎng)頁穿上絢麗裝備
1 回答關(guān)于頁面布局
1 回答多列布局問題
1 回答多列布局的問題
1 回答css3...
2 回答css3的rotate
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2017-05-08
align-items屬性定義項目在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉軸的起點對齊。
flex-end:交叉軸的終點對齊。
center:交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch(默認值):如果項目未設(shè)置高度或設(shè)為auto,將占滿整個容器的高度
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:與交叉軸的起點對齊。
flex-end:與交叉軸的終點對齊。
center:與交叉軸的中點對齊。
space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch(默認值):軸線占滿整個交叉軸。
2016-04-04
align-content 屬性在當靈活容器內(nèi)的各項沒有占用交叉軸上所有可用的空間時對齊容器內(nèi)的各項(垂直)。
center 項目位于容器的中心。 ? ?
align-items 屬性規(guī)定靈活容器內(nèi)的各項的默認對齊方式。
提示:使用每個項目的 align-self 屬性可重寫 align-items 實現(xiàn)。
center 項目位于容器的中心。 ? ?