這是我參與 2022 首次更文挑戰的第 6 天，活動詳情查看：2022 首次更文挑戰
問：為什麼要使用 flex 佈局？
答：因為好用。
在面試的時候，當面試官問我們為什麼要使用 flex 佈局時，首先我們得先明白一點，問這個問題面試官到底想要了解什麼？簡單的回答「好用」肯定是不行的，任何方案和技術的出現都是為了彌補之前的缺陷，所以相比傳統的佈局方案存在的痛點，flex 佈局肯定有存在的優勢和價值。所以接下來我們得說傳統的佈局是怎樣的形式，然後使用了 flex 佈局又是什麼樣的形式。
佈局的傳統解決方案，基於盒子模型，依賴 display、position、float 等屬性。它對於那些特殊佈局非常不方便。
比如，垂直居中就不容易實現。我們可能要 position + transform 才能配合完成。
<div class="wrap">
<div class="box"></div>
</div>
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
新的方案 flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。
使用了 flex 佈局的盒子模型設置垂直居中就非常簡單了，只需要設置 align-items:center; 屬性。
.wrap {
width: 300px;
height: 300px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.box {
height: 100px;
width: 100px;
border: 1px solid blue;
}
Flex 是 Flexible Box 的縮寫，意為「彈性佈局」，用來為盒狀模型提供最大的靈活性。
1. 兩欄佈局
如果我們需要實現頁面兩欄佈局的效果，一欄固定寬度，一欄自適應。
1.1 方法 1
左側 float:left，右側 margin-left。
.left {
float: left;
width: 200px;
}
.right {
margin-left: 200px;
}
浮動的元素在頁面中脫離文檔流，沒有了自己的位置，所以後面的元素被浮動的元素覆蓋，透過 margin 或 padding 撐開。
1.2 方法 2
左側 float:left，右側 overflow:hidden。
.left {
float: left;
width: 200px;
}
.right {
overflow: hidden;
}
還可以透過 overflow: hidden; 清除浮動。
1.3 方法 3
利用定位 position
.wrap {
position: relative;
}
.left {
width: 200px;
}
.right {
position: absolute;
top: 0;
left: 200px;
}
1.4 方法 4
利用彈性佈局 flex
.wrap {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: 1;
}
2. 屬性
問：align-items 和 justify-content 的區別
採用 Flex 佈局的元素，稱為 Flex 容器（flex container），簡稱「容器」。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
flex-direction 屬性決定主軸的方向（也就是排列方向）。有 4 個屬性值可以設置。
- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿。
注意：面試的時候不要說：水平方向是主軸，這樣不太準確，因為主軸可能是水平和垂直方向。因為 flex-direction 屬性決定主軸的方向。
- align-items 屬性定義項目在交叉軸上如何對齊。
- justify-content 屬性定義了項目在主轴上的對齊方式。
問：flex:1;代表什麼意思
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 的簡寫，默認值為 0 1 auto。後兩個屬性可選。
flex-grow 屬性定義項目的放大比例，默認為 0，即如果存在剩餘空間，也不放大。如果所有項目的 flex-grow 屬性都為 1，則它們將等分剩餘空間（如果有的話）。如果一個項目的 flex-grow 屬性為 2，其他項目都為 1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink 屬性定義了項目的縮小比例，默認為 1，即如果空間不足，該項目將縮小。如果所有項目的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小。如果一個項目的 flex-shrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。
flex-basis 屬性定義了在分配多餘空間之前，項目佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值為 auto，即項目的本來大小。
flex 屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
所以 flex: 1 表示的含義是等分剩餘空間。