建站
咨詢
售后
建站咨詢
新聞中心
Flex布局簡介
Flexbox，即彈性盒子模型，是一種現(xiàn)代的網(wǎng)頁布局模式，它為各種大小的屏幕和不同設(shè)備提供了強大的空間分布和對齊能力，F(xiàn)lex布局允許內(nèi)部元素根據(jù)容器的空間自動伸縮和重新排列，從而簡化了許多復(fù)雜的布局任務(wù)。
基本屬性
在Flex布局中，有兩個主要的角色：容器（父元素）和項目（子元素），以下是它們各自的屬性：
容器屬性
1、display: 設(shè)置為flex或inlineflex以啟用Flex布局。
2、flexdirection: 定義主軸的方向，可以是row（默認）、rowreverse、column或columnreverse。
3、flexwrap: 定義項目是否換行，可以是nowrap（默認）、wrap或wrapreverse。
4、flexflow: 是flexdirection和flexwrap的簡寫形式。
5、justifycontent: 定義項目在主軸上的對齊方式，可以是flexstart、flexend、center、spacebetween或spacearound。
6、alignitems: 定義項目在交叉軸上的對齊方式，可以是stretch（默認）、flexstart、flexend、center或baseline。
7、aligncontent: 定義多行情況下，項目在交叉軸上的對齊方式，可以是stretch（默認）、flexstart、flexend、center、spacebetween或spacearound。
8、flexgrow: 定義項目的放大比例，當存在剩余空間時，項目將按此比例放大。
9、flexshrink: 定義項目的縮小比例，當空間不足時，項目將按此比例縮小。
10、flexbasis: 定義項目在分配多余空間之前的默認大小。
項目屬性
1、order: 定義項目的排序順序。
2、flexgrow: 與容器中的flexgrow相同，但僅影響特定項目。
3、flexshrink: 與容器中的flexshrink相同，但僅影響特定項目。
4、flexbasis: 與容器中的flexbasis相同，但僅影響特定項目。
5、flex: 是flexgrow、flexshrink和flexbasis的簡寫形式。
6、alignself: 允許項目覆蓋容器的alignitems屬性，可以是auto（默認）、flexstart、flexend、center、baseline或stretch。
示例表格
下面是一個展示容器和項目屬性的表格：
| 類別 | 屬性 | 值 | 描述 |
| 容器 | display | flex | 啟用Flex布局 |
| 容器 | flexdirection | row | 設(shè)置主軸方向為水平 |
| 容器 | flexwrap | wrap | 允許項目換行 |
| 容器 | justifycontent | center | 項目在主軸上居中對齊 |
| 容器 | alignitems | stretch | 項目在交叉軸上拉伸以填充容器 |
| 容器 | aligncontent | spacebetween | 多行項目在交叉軸上均勻分布 |
| 項目 | order | 1 | 項目的排序順序 |
| 項目 | flexgrow | 1 | 項目可以放大的比例 |
| 項目 | flexshrink | 1 | 項目可以縮小的比例 |
| 項目 | flexbasis | auto | 項目分配多余空間前的初始大小 |
| 項目 | flex | 1 1 auto | flexgrow、flexshrink和flexbasis的簡寫 |
| 項目 | alignself | auto | 允許項目覆蓋容器的交叉軸對齊方式 |
Q1: 如果我想要一個項目始終在最前面顯示，不管其他項目如何排列，我應(yīng)該怎么設(shè)置？
A1: 你可以使用項目的order屬性來實現(xiàn)這個效果，將該項目的order屬性值設(shè)置為一個較小的數(shù)字（1），而其他項目的order保持默認值0或更高的數(shù)字。
Q2: 我設(shè)置了alignitems: center;，但項目并沒有在交叉軸上居中，這是為什么？
A2: alignitems: center;只會在交叉軸上居中對齊單行的項目，如果你有多行項目并且想要在交叉軸上居中對齊，你應(yīng)該使用aligncontent: center;來實現(xiàn)這一效果。
分享標題：flex布局有哪些屬性
文章出自：http://www.5511xx.com/article/cdcgpgc.html
