本篇文章參考以下博文
文章目錄
前言
之前做項目，關於佈局方面沒怎麼深入研究過，好多頁面都是能用定位就用定位，能用百分比就用百分比，導致很多地方，看似對齊了，但是就很彆扭，這幾天又被一個佈局折磨了很久。於是痛定思痛，總結一下自己思想上的問題。
自己之前沒把 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 意爲“繼承”，可以從父元素中繼承該屬性。
（多謝 qq_1726010671 幫忙指出文中不足之處）
2.2 flex-wrap 屬性
根據中文意思來判斷，這個東西應該是控制換行的。
.faBox{
flex-wrap: nowrap | wrap | wrap-reverse;
}
2.3 flex-flow 屬性
該屬性是 flex-wrap 和 flex-direction 的簡寫方式。
.faBox{
flex-flow: <flex-direction> || <flex-wrap>;
}
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: <integer>;
}
3.2 flex-grow 屬性
定義項目的放大比例，默認 0 ，不參與放大。
.sonBox1{
flex-grow: <number>; /* default 0 */
}
3.3 flex-shrink 屬性
定義項目縮放。
.sonBox1{
flex-shrink: <number>; /* default 1 */
}
3.4 flex-basis 屬性
屬性定義了在分配多餘空間之前，項目佔據的主軸空間。
.sonBox1{
flex-shrink: <number>; /* default 1 */
}
3.5 flex 屬性（推薦）
flex-grow，flex-shrink 和 flex-basis 的簡寫。
.sonBox1{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
3.6 align-self 屬性
可給子元素設置單獨的對齊方式。 auto 的時候是繼承父元素的 align-item
.sonBox1{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
