布局的概念
之前寫前端，如果沒有一個(gè)布局的概念的花提陶，那你的網(wǎng)頁就會(huì)寫的很混亂咱旱。所以在設(shè)計(jì)網(wǎng)頁之初就應(yīng)該想好。這個(gè)網(wǎng)頁整體應(yīng)該是什么樣子的霎箍。布局就和word中的排版差不多，就是讓你的網(wǎng)頁好看澡为，清晰漂坏。一般布局我用過以下三種
- table布局
- bootstra的柵格布局
- 今天剛學(xué)的flex布局
table的布局應(yīng)該是基礎(chǔ)中的基礎(chǔ)，只要將表格的邊線變?yōu)橥该鳎敲茨愕牟季志蜁?huì)轉(zhuǎn)化為一個(gè)一個(gè)的單元格顶别，但是這種技術(shù)的缺陷在于谷徙，一旦你要使用table標(biāo)簽創(chuàng)建一個(gè)表格的話，那么你的代碼將會(huì)寫的很亂很難看驯绎，非常不利于維護(hù)完慧。
bootartap的自帶的柵格布局是一個(gè)很強(qiáng)大的布局系統(tǒng)，使用好的話剩失，可以很輕松的排列你的div屈尼，而且是響應(yīng)式布局。一般寫法如下
<div class="row">
<div class="col-md-4">11</div>
<div class="col-md-4">22</div>
<div class="col-md-4">33</div>
</div>
那么11赴叹，22，33指蚜，就排列在一行上面了乞巧。但是這種寫法會(huì)帶來很多div，嵌套很多div摊鸡，導(dǎo)致你的代碼很長绽媒。要是你使用的編輯器比較落后，很難定位具體某個(gè)div免猾。接下來的這種事flex布局
布局的類型
說完了布局使用的相關(guān)技術(shù)后是辕，選座來說一下布局的概念。一般的的布局有以下三種類型猎提。
- 上中下布局
| 上（header） |
|---|
| 中 （content） |
| 下（footer） |
這種布局很常見获三，知乎，簡書基本都是這樣的锨苏，上部是header也就是標(biāo)題欄疙教，中不是內(nèi)容，下部一般寫一些網(wǎng)站的備案啊之類的伞租。
- 雙欄布局
| 側(cè)邊欄（sider） | 內(nèi)容 (content) |
|---|
這種布局一般是用于管理系統(tǒng)贞谓，左邊有一個(gè)側(cè)邊欄可以切換不同的管理功能。
使用flex布局
首先先上一張從其他網(wǎng)站拷過來的圖
這張圖涵蓋了基本的flex屬性葵诈，下面裸弦，我們一個(gè)一個(gè)來介紹它的屬性，首先作喘，先理解幾個(gè)概念
容器
容器就是承載flex的標(biāo)簽理疙，如果一個(gè)div想要使用flex布局，你就得這么寫
<div style="display: flex">這是一個(gè)flex容器</div>
那么這個(gè)div就是一個(gè)flex容器泞坦，如果這個(gè)div中再嵌套一個(gè)有flex屬性的div那么這兩個(gè)div就是父容器和子容器的關(guān)系
<div style="display: flex">
這是一個(gè)父容器
<div style="display: flex">這是子容器</div>
</div>
父容器可以統(tǒng)一設(shè)置子容器的排列方式沪斟，子容器也可以單獨(dú)設(shè)置自身的排列方式，如果兩者同時(shí)設(shè)置，以子容器的設(shè)置為準(zhǔn)主之。
軸
- 主軸
justify-content決定了其排列方向 - 交叉軸
align-items決定了其排列方向
一般來說主軸是指水平方向的軸择吊，交叉軸是指垂直方向的軸。但是flex-direction這個(gè)屬性槽奕，決定了主軸的方向几睛，而交叉軸就是主軸旋轉(zhuǎn)90度所得到的軸。所以主軸是根據(jù)flex-direction屬性決定而交叉軸根據(jù)主軸來決定粤攒。
flex-direction
屬性有 row 和 column 分別表示橫向排列和縱向排列
flex-wrap
屬性有wrap和nowrap所森，分別表示換行和不換行。
