先來點顧名思義，Flex，摺疊；box，盒子。可以摺疊的盒子，也稱作彈性盒子，就是可以根據可用的空間進行縮放的網頁元素。
既然是盒子，那麼肯定有容器，又有容器內部的元素。
那麼具體怎麼縮放呢？我們通過幾個例子來看看 Flex 的基本用法……
伸展、收縮和基準
Flex 的縮放，影響的是容器內部的元素。
要用 Flex，首先得把容器設置為 Flex。
可以通過設置容器 display: flex; 輕易做到這一點。
好了，現在容器變成彈性盒子了，裏面的元素會如何佈局呢？
讓我們看看下面的示例：
<div class="container">
<div class="content">This is an item</div>
<div class="content">This is an item</div>
<div class="content">This is an item</div>
</div>我們還沒有增加任何 CSS，這時候，網頁元素按照上一篇裏面説的正常佈局流顯示，也就是從上到下。
正常佈局
那麼我們先把它變成彈性盒子試試：
.container{
display: flex;
}
.content{
border: 1px solid red;
}是的，現在它們變成了橫向堆疊。（方向的問題之後再解釋）
橫向堆疊
現在，我們嘗試把可視範圍壓縮下，當橫向沒有空間時，會發生什麼？
讓我們摺疊！
可以看到，當橫向空間不足，整個元素自動橫向收縮。由於字必須顯示，因此換行到了第二行。只有一行只有一個單詞的時候，才會溢出（因為不能截斷單詞）
這種行為由 flex 屬性控制，它是以下三個屬性的縮寫：
- • flex-grow（控制放大）
- • flex-shrink（控制收縮）
- • flex-basis（控制元素的基礎大小）
默認情況下，設置為 flex: 0 1 auto
也就是説，上面的代碼，與下面都是等效的。
.content{
border: 1px solid red;
flex: 01 auto;
}
/* 或者，和下面也是等效的 */
.content{
border: 1px solid red;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}我知道你很急，但你先別急。接下來我們就來看看這三個屬性。
flex-grow/shrink
這個元素控制了元素是否伸展，以及不同元素之間的伸展比例。
試一試，把上面值從 0 改成 1。
伸展的元素
發現了嗎？現在，元素自動佔滿了整個空間。也就是説，設定為 0，就是不伸展，非 0，就是允許伸展。
為什麼説非 0 呢？
因為這個數字表示比例。
也就是説，如果你給不同元素設定不同數字，那麼它們就會按照不同的比例進行縮放。
比如……
.content1{
flex-grow: 1;
}
.content2{
flex-grow: 2;
}
.content3{
flex-grow: 3;
}自己試一試，你會發現它們按照 1：2：3 進行放大。
也就是説，設定為 100：100 和 1：1 的效果是完全一致的。
收縮也同理啦。0 不允許收縮。其它數字就是收縮比例。
flex-basis
你有沒有發現，我們上面都在討論縮放。
當我們談到縮放時，是對原先就有的東西，進行縮小和放大。
而 flex-basis，就是定義這個“縮放基準”。默認情況下，會根據你的文字長度自動決定，也就是 auto。
現在我們先把放大關掉，然後嘗試改變窗口大小：
.content{
border: 1px solid red;
flex: 0 1 200px;
}
定義縮放基準
看到了嗎？當達到 200px 的時候，不再放大，因為不允許放大。200px 為一個基準。
實際上，使用 width 也可以達到同樣的效果。但是，flex-basis 的優先級更高，並且方向會隨着 flex 方向改變。
下面，我們就來聊聊 flex 的方向。
flex 的軸
看完了放縮，是時候看看 flex 佈局元素的方向了！
flex 有兩根軸，分別稱作主軸和交叉軸。
在默認情況下，它們如下排列：
水平堆疊示意圖
元素沿着主軸堆疊。
但是，你也可以手動更改。
用到的屬性是 flex-direction。寫在容器裏面。上面的默認值為 row。現在我們改成 column 試試。
.container{
display: flex;
flex-direction: column;
}
.content{
border: 1px solid red;
}
垂直堆疊
是的，它變成了垂直堆疊。
現在，變成這樣：
垂直堆疊示意圖
還記得上面我們提到的 flex-basis 嗎？
它表示元素在主軸上面的基準，也就是説，如果再次加上上面的基準……
.content{
border: 1px solid red;
flex: 0 1 200px;
}
設置基準
沒錯，基準的方向是主軸！
注意了，在設置為 column 時，即使 flex-grow 為 1，也不會自動放大佔滿屏幕哦。這是因為，你並沒有指定容器的高度，因此不會自動拉長。
你也許注意到了，上面的例子裏面，水平方向是佔滿的。沒錯，水平方向是會自動佔滿屏幕的。這和 html 有關，元素默認就有寬度。
調整元素佈局
要想調整元素的佈局，有 3 個重要屬性，一定要記住。
justify-content
這個屬性，指定了容器該如何在主軸上面排列元素。
可選的常用值有：
- • space-between，容器內子元素間均分空隙，但是元素和兩邊沒有空隙
- • space-around，上面的+元素兩邊也有空隙
- • center，元素居中緊密排列
- • flex-start，元素排列在主軸開頭
- • flex-end，元素排列在主軸末尾
速通一下：
.container1,.container2,.container3{
display: flex;
margin: 20px0px;
}
.content{
border: 1px solid red;
flex: 01100px;
}
.container1{
justify-content: flex-end;
}
.container2{
justify-content: space-between;
}
.container3{
justify-content: space-around;
}
示例
其它的幾個，請自行探索~
另外注意，可以設置 gap 屬性，控制元素間的距離哦。請自行嘗試~
align-item
控制子元素在交叉軸上面的排列。
可選值：
- • flex-start/end 同上
- • center 同上
- • stretch 拉伸佔滿空間
再來個速通例子：
.container1,.container2,.container3{
display: flex;
margin: 20px0px;
justify-content: center;
}
.content{
border: 1px solid red;
flex: 01100px;
}
.container1{
align-items: flex-start;
}
.container2{
align-items: center;
}
.container3{
align-items: flex-end;
}html 部分有所改動：
<div class="content" style="height: 50px;">This is an item</div>
<div class="content" style="height: 30px;">This is an item</div>
<div class="content" style="height: 20px;">This is an item</div>給加上了高度限定。
效果：
align-items
很好理解，這裏不再贅述。
最重要的是，這個 stretch。
去掉每個元素的死高度限制，改下代碼：
.container1{
display: flex;
margin: 20px 0px;
justify-content: center;
align-items: stretch;
height: 100px;
}
示例拉伸
看到了嗎，它拉伸了。
另外，你也可以對於單個元素設置 align-self，改變它在交叉軸上的排列方式。這裏不再演示，自己試試就好啦。
自動換行
如果主軸上顯示不下，你可以設置自動換行。自動換行會根據 flex-basis 進行計算。
設定 flex-warp 即可換行。
.container1{
display: flex;
margin: 20px0px;
justify-content: center;
flex-wrap: wrap;
}
.content{
border: 1px solid red;
flex: 11200px;
}當元素達到 200px 時，換行標準滿足，此時不再收縮，而是直接換行。直到換行仍然無法顯示，再進行收縮。也就是説，flex-basis 像是一種建議，瀏覽器會盡力滿足這種建議：
自動換行
注意了，換行後，我們就存在了多根主軸。
既然 align-items 在交叉軸上對齊元素，那麼主軸的對齊怎麼辦？
此時就有了新的屬性。
align-content
排列組合
改下代碼，指定一個容器高度：
.container1{
display: flex;
margin: 20px0px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
align-content: center;/* 把多個主軸在交叉軸上居中在容器內 */
height: 200px;
}換行後，效果是這樣的（注意這個截圖不完整，實際上是佈局在 200px 正中間的）：
center
但是，如果我們改成 space-between。
space-between
是的，和前面兩個的邏輯完全一樣，只不過是改變了對象，涉及主軸的排列罷了。
直接上示意圖！
結語
flexbox 為我們的網頁佈局提供了非常多的可能性，允許我們創建可縮放的網頁。搞清楚這些屬性之後，flex 也就不難了。
基礎 css 講完了，下一篇我們將涉及 javascript，同樣是簡明易懂的奶奶級教程，敬請期待哦。
