Flex佈局-從瞭解到使用只需5min

寫在前面：

我是「沸羊羊_」，暱稱來自於姓名的縮寫 fyy ，之前嘔心瀝血經營的博客因手殘意外註銷，現經營此賬號。
本人是個小菜，正向着全棧工程師的方向努力着，文章可能並不高產，也很基礎，但每寫一篇都在用心總結，請大佬勿噴。
如果您對編程有興趣，請關注我的動態，一起學習研究。
感謝每位讀者！

Flex簡介

頁面佈局的傳統解決方案是基於盒狀模型，使用 display屬性+position屬性+float屬性，但對於特殊佈局非常不方便。直到2009年，W3C提出瞭解決方案-----Flex佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，意味着，現在可以很安全的使用這項功能。

Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。

任何一個容器都可以指定爲Flex佈局。

注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。

其他佈局

table佈局

在實際的項目開發過程中，不建議用table進行佈局。

缺點：

• table 比其他html標籤佔更多的字節。造成下載時間延遲，佔用服務器更多的流量資源（代碼冗餘）
• table 會阻擋瀏覽其渲染引擎的渲染順序，會延遲頁面的生成速度，讓用戶等待時間更久。
• 靈活性差，一旦設計確定，後期很難通過CSS讓它展現新的面貌。
• 不利於搜索引擎抓取信息，直接影響到網站的排名

優點：

• 兼容性好
• 容易上手

float佈局

float 屬性定義元素在哪個方向浮動。

缺點：

• 脫離文檔流，需要清除浮動，高度塌陷（float的破壞性主要是指它會使父容器的高度塌陷，也就是父元素在高度計算的時候會忽略浮動的元素）。

優點：

• 兼容性好，比較簡單。

absolute佈局

relative屬性：脫離文檔流，但保留佔位符，其偏移位置是相對於本身在正常文檔流中時的位置

脫離文檔流是說設置了relative屬性之後，元素不在z-index:0;的正常文檔流中，其z-index的值>0，但保留佔位符，就是在正常文檔流中位置保留着，後繼元素不能佔位，然後相對於本身正常位置進行偏移。

缺點：

脫離文檔流，會導致後續元素全部脫離文檔流，可用行差。

grid佈局

Grid 佈局是 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不同，CSS Grid 佈局是一個二維佈局系統，意味着它可以同時處理列和行。

Flex佈局

容器屬性

元素結構

效果：

<template>
  <div class="body">
    <div class="container">
      <div class="one">one</div>
      <div class="two">two</div>
      <div class="three">three</div>
    </div>
  </div>
</template>

<style scoped>
.body {
  margin: 0;
  padding: 0;
}
.container {
  width: 300px;
  background: #999;
  margin: 50px auto;
}
.one {
  width: 100px;
  height: 50px;
  background-color: #375;
}
.two {
  width: 100px;
  height: 50px;
  background-color: #854;
}
.three {
  width: 100px;
  height: 50px;
  background-color: #489;
}
</style>

---

使用flex佈局

display:flex

因爲flex佈局默認主軸方向爲 row ，以行爲主軸，所以內容在主軸的起點和終點兩根軸線之間。

---

改變主軸方向 - flex-direction屬性

主軸方向： flex-direction: column;


把 主軸方向改爲 column後，以列爲主軸，行爲交叉軸，所以內容在主軸的兩根軸線之間。

主軸方向：flex-direction: column-reverse;

以列爲主軸，將排列方式反轉，以原點爲起點。

---

改變換行方式 - flex-wrap屬性

換行：flex-wrap:wrap;

換行：flex-wrap:wrap-reverse;

---

flex-flow屬性（flex-directive和flex-wrap簡寫）

以行爲主軸，換行：flex-flow:row wrap;

以行爲主軸，不換行：flex-flow:row nowrap;

以列爲主軸，換行：flex-flow: column wrap;

以列爲主軸，不換行：flex-flow: column nowrap;

---

主軸對齊方式 - justify-content

行爲主軸，左對齊（默認值）: justify-content: flex-start;

行爲主軸，右對齊: justify-content: flex-end;

行爲主軸，居中: justify-content: center;

行爲主軸，兩端對齊，元素之間間隔相等: justify-content: space-between;

行爲主軸，元素邊框兩側間隔相等，元素之間間隔比元素邊框間隔大一倍: justify-content: space-around;

列爲主軸，左對齊（默認值）: flex-direction: column; justify-content: flex-start;

列爲主軸，右對齊: flex-direction: column; justify-content: flex-end;

列爲主軸，居中: flex-direction: column; justify-content: center;

列爲主軸，兩端對齊，元素之間間隔相等: flex-direction: column; justify-content: space-between;

列爲主軸，元素邊框兩側間隔相等，元素之間間隔比元素邊框間隔大一倍: flex-direction: column; justify-content: space-around;

---

交叉軸對齊方式 - align-items

列爲交叉軸，左對齊（默認值）: align-items: flex-start;

列爲交叉軸，右對齊: align-items: flex-end;

列爲交叉軸，居中: align-items: center;

列爲交叉軸，以元素第一行文字基線對齊: align-items: baseline;

列爲交叉軸，取消元素高度將佔滿整個容器高度（默認值）: align-items: stretch;

行爲交叉軸，左對齊（默認值）: flex-direction: column; align-items: flex-start;

行爲交叉軸，右對齊: flex-direction: column; align-items: flex-end;

行爲交叉軸，居中: flex-direction: column; align-items: center;

行爲交叉軸，以元素第一行文字基線對齊: flex-direction: column; align-items: baseline;

行爲交叉軸，取消元素高度（默認值）: flex-direction: column; align-items: stretch;

多根軸線對齊方式 - align-content

注意：容器內必須有多行元素，align-content 屬性才能渲染出效果。

子元素屬性

子元素屬性 – order

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

.one {
  order: 2;
}
.two {
  order: 1;
}
.three {
  order: 1;
}

子元素屬性 – flex-grow

flex-grow屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。

如果所有項目的flex-grow屬性都爲1，則它們將等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性爲2，其他項目都爲1，則前者佔據的剩餘空間將比其他項多一倍。

.one {
  flex-grow: 1;
}
.two {
  flex-grow: 2;
}
.three {
  flex-grow: 1;
}

子元素屬性 – flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。數值越大，相對比例越小。

如果所有項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性爲0，其他項目都爲1，則空間不足時，前者不縮小。

負值對該屬性無效。

// case 1
.one {
  flex-shrink: 3;
}
.two {
}
.three {
}

// case 2
.one {
  flex-shrink: 0;
}
.two {
}
.three {
}

子元素屬性 – flex-basis

flex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。

它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。

.one {
  flex-basis: 500px;
}
.two {
}
.three {
}

子元素屬性 – flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

.one {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值。

子元素屬性 – align-self

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

//子元素容器
.container {
  display: flex;
  align-items: center;
}
.one {
  align-self: flex-start;
}
.two {
}
.three {
}

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

最後

以上爲小編學習總結記錄，如有錯誤，請大佬指出，不勝感激。