css Flex容器屬性怎么用

發(fā)布時間：2022-05-12 11:40:56 來源：億速云閱讀：135 作者：iii 欄目：編程語言

這篇文章主要介紹了css Flex容器屬性怎么用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css Flex容器屬性怎么用文章都會有所收獲，下面我們一起來看看吧。

1、flex-direction設(shè)置主軸的方向

即項目的排列方向。

flex-direction: row | row-reverse | column | column-reverse;

2、flex-wrap

默認(rèn)情況下，item都排在一條線（又稱”軸線”）上。flex-wrap屬性定義了，如果一條軸線排不下，item的換行方式。

flex-wrap: nowrap | wrap | wrap-reverse;

3、flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認(rèn)值為row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

4、justify-content

定義了項目在主軸上的對齊方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

5、align-items

設(shè)置了項目在交叉軸上的對齊方式。

align-items: flex-start | flex-end | center | baseline | stretch

6、align-content

多根軸線的對齊方式。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

關(guān)于“css Flex容器屬性怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“css Flex容器屬性怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

猜你喜歡