Flex佈局入門

1、Flex介紹

Flex做爲目前主流的彈性佈局方式，已經可以完成平常工做中絕大多數場景。本片將結合實例講述Flex佈局中一些經常使用屬性。關於兼容性，請移步MDN Flex佈局兼容性。

2、如何使用

如何啓用flex佈局，很簡單，只要按以下設置。

div {
    display: flex;
}
複製代碼

讓咱們看看效果，當不設置flex佈局，咱們寫兩個div。

<div>
  <div>我是div1</div>
  <div>我是div2</div>
</div>
複製代碼

界面以下：

而後咱們給外層 div設置 class爲 content，經過類設置 display爲 flex

.content {
    display: flex
}
<div class='content'>
  <div>我是div1</div>
  <div>我是div2</div>
</div>
複製代碼

而後界面變成這樣：

內部的兩個div彷彿變成了行內元素，出現了在一行內。爲何會這樣呢？這就得說到flex佈局的幾個重要屬性了。

3、重要屬性

再說屬性以前，咱們先說兩個重要概念，咱們將一個div設置爲flex佈局後，這個div就至關於多了兩個屬性，主軸和交叉軸，默認主軸自左向右，交叉軸自上向下能夠按下圖進行理解：

咱們回到以前，咱們設置父盒子爲flex佈局後，內部的兩個div並列到了一行的問題上，這個緣由就是 當咱們設置一個元素的佈局方式爲flex後，該元素內部的元素都將按主軸依次排列，當元素超出一行而且須要換行時將會按交叉軸進行換行。接下來所講的屬性都將圍繞主軸和交叉軸來進行說明。

1. flex-direction

居然存在主軸那咱們就能夠定義其主軸方向，而定義主軸方法就要經過flex-direction這個屬性，該屬性分別有如下值：

flex-direction: row(默認) | row-reverse | column | cloumn-reverse
row: 主軸在水平方向，從左至右；
row-reverse：主軸在水平方向，從右至左；
column：主軸在垂直方向，從上至下；
cloumn-reverse：主軸在垂直方向，從下至上。
複製代碼

讓咱們來看看例子，假設咱們如今想實現如下效果。

咱們想將兩個按鈕固定到頁面的右側，這是隻須要設置兩個按鈕的外層盒子爲flex佈局，同時設置主軸方向水平，從右至左，代碼以下：

.content2 {
  display: flex;
  flex-direction: row-reverse;
}
<div class="content2">
  <button>按鈕1</button>
  <button>按鈕2</button>
</div>
複製代碼

2. justify-content

咱們除了能夠自定義主軸方向還能夠規定盒子內各元素在主軸上的對齊方式，經過屬性justify-content，該屬性包含如下值：

justify-content: flex-start(默認) | flex-end | center | space-between | space-around
flex-start: 左對齊
flex-end：右對齊
flex-center：具中對齊
space-between：兩端對齊，元素之間的間隔相等
sapce-around：項目兩側間隔相等
複製代碼

讓咱們來看一個頁面佈局最長見的一種狀況經過justify-content如何實現。如今咱們想實現以下效果，讓輸入框和確認按鈕分別位於頁面兩端：

代碼以下：

.content3 {
  border: 1px solid #000;
  padding: 5px;
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between; // 兩端對齊
}
button {
  height: 30px;
}
input {
  height: 30px;
}
<div class="content3">
  <input />
  <button>確認輸入</button>
</div>
複製代碼

3. align-items

說完主軸，咱們來講說交叉軸上的屬性，align-items即定義項目在交叉軸上的對齊方式，該屬性有如下取值：

align-items: flex-start | flex-end | center | baseline | stretch（默認）
flex-start: 交叉軸起點對齊；
flex-end：交叉軸終點對齊；
center：交叉軸具中對齊；
baseline：每一個項目的第一行文字對齊；
stretch：若是項目未設置高度或者設置的高度爲auto，將佔滿整個交叉軸
複製代碼

讓咱們來看看應用實例，咱們想實現以下左右上下垂直具中：

代碼以下：

.content4 {
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center; // 設置主軸方向具中對齊
  align-items: center; // 設置交叉軸方向具中對齊
}
.sub_div {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}
<div class="content4">
  <div class="sub_div"></div>
</div>
複製代碼

4、實現一個簡單的登錄頁面

接下來，咱們經過flex佈局進行簡單運用，來實現下面這個簡單登錄頁面

代碼若是，注意看代碼內的分析

.login_page {
  height: 180px;
  width: 300px;
  border: 1px solid #000;
  padding: 10px;
}
.username {
  margin: 20px;
  display: flex; // 設置用戶名域爲flex佈局
  justify-content: space-between; // 設置主軸兩端對齊
}
input {
  width: 180px;
}
.password {
  margin: 20px;
  display: flex; // 設置密碼域爲flex佈局
  justify-content: space-between; // 設置主軸兩端對齊，與上面用戶名域對齊
}
.button_field {
  margin: 20px;
  padding: 0 40px; 設置左右內邊距，讓按鈕向中間縮緊
  display: flex; // 設置按鈕域爲flex佈局
  justify-content: space-between; // 設置主軸兩端對齊
}
button {
  width: 60px;
}
<div class="login_page">
  <div class="username">
    <span>用戶名</span>
    <input />
  </div>
  <div class="password">
    <span>密碼</span>
    <input />
  </div>
  <div class="button_field">
    <button>註冊</button>
    <button>登錄</button>
  </div>
</div>
複製代碼

5、總結

Flex做爲一種強大的佈局方式，擁有不少屬性，本文只講了平常開發中最經常使用其最重要的三個屬性，在平常開發中咱們若是可以將這三個屬性靈活使用將實現大多數佈局場景。關於Flex佈局具體的屬性後面的文章將繼續分享，歡迎關注，謝謝0～。～0