作者: EcbJS?https://blog.csdn.net/EcbJS/article/details/106466757?utm_source=app

1.基本原理

Flex?英文意思為，彎曲，屈伸，可以伸縮的布局，天生就是為了適配不同的分辨率。而且用法也很簡單，首先只要告訴瀏覽器，我是一個伸縮布局就可以了。

.faBox {
display: 'flex'; //給父元素設置為伸縮布局

.sonBox1 {
...
}
.sonBox2 {
...
}
}

設置完 Flex 之后，就會有下面的這個關系圖，我們一個一個看。

2.容器屬性

誰被設置成了?display: flex;?，誰就是容器。上面圖中，faBox?就是容器，所以容器屬性要寫在容器屬性里面。

2.1 flex-direction 屬性

從英語意思了解屬性，翻譯為伸縮方向，該屬性可以設置主軸的方向，有六個值。

.faBox {
flex-direction: row | row-reverse | column | column-reverse | initial | inherit;
}

上面前四個屬性分別對應以下四種情況

flex-direction?還有兩個可能的取值，initial?和?inherit?根據英文意思可知。

initial?意為“最初的”，是 CSS 提供的關鍵字，很多地方都能使用，可以快速設置某個屬性的默認值，方便快捷。inherit?意為“繼承”，可以從父元素中繼承該屬性。

2.2 flex-wrap 屬性

根據中文意思來判斷，這個東西應該是控制換行的。

.faBox{
flex-wrap: nowrap | wrap | wrap-reverse;
}

2.3 flex-flow 屬性

該屬性是?flex-wrap?和?flex-direction?的簡寫方式。

.faBox{
flex-flow: || ;
}

2.4 justify-content 屬性

該屬性負責主軸的對齊方式。

.faBox{
justify-content: flex-start | flex-end | center | space-between | space-around;
}

2.5 align-items 屬性

該屬性負責交叉軸的對齊方式(垂直居中靠它來實現，很容易，面試常考題)。

2.6 align-content 屬性

設置多根主軸時候的對齊方式，如果只有一條軸線，不起作用。

.faBox{
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

3.項目屬性

3.1 order 屬性

order?英文意思秩序，該屬性可以設置項目的排列順序，從小到大。

.sonBox1{
order: ;
}

3.2 flex-grow 屬性

定義項目的放大比例，默認?0?，不參與放大。

.sonBox1{
flex-grow: ; /* default 0 */
}

3.3 flex-shrink 屬性

定義項目縮放。

.sonBox1{
flex-shrink: ; /* default 1 */
}

3.4 flex-basis 屬性

屬性定義了在分配多余空間之前，項目占據的主軸空間。

.sonBox1{
flex-shrink: ; /* default 1 */
}

3.5 flex 屬性(推薦)

flex-grow，flex-shrink?和?flex-basis?的簡寫。

.sonBox1{
flex: none | [ ? || ]
}

3.6 align-self 屬性

可給子元素設置單獨的對齊方式。auto?的時候是繼承父元素的?align-item

.sonBox1{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
近期大白話讓你更懂Docker前端如何在項目中做出亮點在看支持一下?? 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的flex布局_Flex布局，真香的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。