爲什麼要使用 flex 佈局?

來自：掘金，作者：前端精髓

鏈接：https://juejin.cn/post/7063823914136256543

問：爲什麼要使用 flex 佈局?

答：因爲好用。

在面試的時候，當面試官問我們爲什麼要使用 flex 佈局的時候，首先我們得先明白一點，問這個問題面試官到底想要了解什麼？簡單的回答” 好用 “肯定是不行的，任何方案和技術的出現都是爲了彌補之前的缺陷，所以相比傳統的佈局方案存在的痛點，flex 佈局肯定有存在的優勢和價值。所以接下來我們得說傳統的佈局是怎樣的形式，然後使用了 flex 佈局又是什麼樣的形式。

佈局的傳統解決方案，基於盒子模型，依賴 display，position，float 等屬性。它對於那些特殊佈局非常不方便。

比如，垂直居中就不容易實現。我們可能要 position + transform 才能配合完成。

截屏 2022-02-12 上午 11.44.26.png

<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 的縮寫，意爲 "彈性佈局"，用來爲盒狀模型提供最大的靈活性。

兩欄佈局

如果我們需要實現頁面兩欄佈局的效果，一欄固定寬度，一欄自適應。

截屏 2022-02-12 上午 11.57.31.png

方法 1

左側 float:left，右側 margin-left。

.left { float: left; width: 200px; }
.right { margin-left: 200px; }
複製代碼

浮動的元素是在頁面中脫離文檔流，沒有了自己的位置，說以後面的元素被浮動的元素覆蓋，通過 margin 或者 padding 撐開。

方法 2

左側 float:left，右側 overflow:hidden。

.left { float: left; width: 200px; }
.right { overflow: hidden; }
複製代碼

還可以通過 overflow: hidden; 清除浮動。

方法 3

利用定位 position

.wrap { position : relative; }
.left { width: 200px; }
.right { position: absolute; top: 0; left: 200px; }
複製代碼

方法 4

利用彈性佈局 flex

.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }
複製代碼

屬性

問：**align-items 和 justify-content 的區別

採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱 "容器"。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。

flex-direction 屬性決定主軸的方向（也就是排列方向）。有 4 個屬性值可以設置。

注意：面試的時候不要說：水平方向是主軸，這樣不太準確，因爲主軸可能是水平和垂直方向。因爲 flex-direction 屬性決定主軸的方向。

截屏 2022-02-12 下午 6.10.04.png

問：**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 表示的含義是等分剩餘空間。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/aIDMoKfz2MD56gYxQUnIbg

猜你喜歡