當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

css布局方式_手把手教你CSS Flex布局「真香」

發布時間：2023/12/18 CSS 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 css布局方式_手把手教你CSS Flex布局「真香」小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者：EcbJS

轉發鏈接：https://blog.csdn.net/EcbJS/article/details/106466757

前言

??之前做項目，關于布局方面沒怎么深入研究過，好多頁面都是能用定位就用定位，能用百分比就用百分比，導致很多地方，看似對齊了，但是就很別扭，這幾天又被一個布局折磨了很久。于是痛定思痛，總結一下自己思想上的問題。

??自己之前沒把 CSS 的相關問題當回事，心里總是理所應當的認為，樣式什么時候用到隨便百度一下就行，這種想法的后果就是，頁面風格很僵硬，不同分辨率的顯示器適配很差，寫頁面的時候，也很莫名其妙，明明我寫了某個樣式，就是沒效果，到頭來還是自己跟自己過不去。

??感覺跟我有一樣想法的同學肯定不少，不過不要緊，知錯能改，善莫大焉。先從 Flex 開始，把布局給整明白，能解決一大堆樣式麻煩。

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.4 align-items 屬性

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

2.5 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 屬性

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