重學前端 36 # Flex 布局

說明

每天10分鐘，重構你的前端知識體系專欄筆記。

一、介紹

這一篇主要從設計、原理和應用三個方面來學習一下 Flex 布局。

詳細的可以看看下面兩篇文章：來自​​阮一峰的網絡日志​​

• ​​Flex 布局教程：文法篇​​
• ​​Flex 布局教程：執行個體篇​​

二、Flex 的設計

​

​Flex​

​​ 排版的核心是 ​

​display:flex​

​​ 和 ​

​flex​

​​ 屬性，它們配合使用。具有 ​

​display:flex​

​​ 的元素我們稱為 ​

​flex​

​​ 容器，它的子元素或者盒被稱作 ​

​flex​

​ 項。

三、Flex 的原理

winter說 Flex 的實作并不複雜，之前winter​​寫過一個基本實作送出給 spritejs 項目，代碼可以參考​​

如何實作一個 Flex 布局？

3.1、第一步：分行

把 flex 項分行，有 Flex 屬性的 flex 項可以暫且認為主軸尺寸為 0，是以，它可以一定放進目前行。

3.2、第二步：計算主軸

3.3、第三步：計算交叉軸

四、Flex 的應用

4.1、垂直居中

<div id="parent">
  <div id="child">
  </div>
</div>      

#parent {
  display:flex;
  width:300px;
  height:300px;
  outline:solid 1px;
  justify-content:center;
  align-content:center;
  align-items:center;
}
#child {
  width:100px;
  height:100px;
  outline:solid 1px;
}      

4.2、兩列等高

<div class="parent">
  <div class="child"style="height:300px;">
  </div>
  <div class="child">
  </div>
</div>
<br/>
<div class="parent">
  <div class="child" >
  </div>
  <div class="child"style="height:300px;">
  </div>
</div>      

.parent {
  display:flex;
  width:300px;
  justify-content:center;
  align-content:center;
  align-items:stretch;
}
.child {
  width:100px;
  outline:solid 1px;
}      

4.3、自适應寬

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>      

.parent {
  display:flex;
  width:300px;
  height:200px;
  background-color:pink;
}
.child1 {
  width:100px;
  background-color:lightblue;
}
.child2 {
  width:100px;
  flex:1;
  outline:solid 1px;
}