flex知識回顧

先看幾個小栗子：

1、在沒有任何樣式的情況下，常規佈局下，有預設間距：

如果將 input 和 button 的父 div 設定 display: flex，則如下：

2、常規佈局下，如果想讓按鈕局最右邊，左邊輸入框自動填滿剩餘寬度，會有些麻煩：

flex 佈局，只需父元素將按鈕設定display: flex，input設定 flex: 1 即可：

3、常規佈局：想做到圖片和輸入框無間距同高度，會有些麻煩：

flex 佈局，只需父元素設定 display: flex 即可：

正文開始：

flex-direction：主軸方向

row：預設值，水平，起點左端

row-reverse：水平，起點右端

column：垂直，起點上端

column-reverse：垂直，起點下端

rtl：水平，起點右端，與row-reverse不同的是，rtl排序的容器裡的內容也是從右到左的

flex-wrap：換行方式

nowrap：預設值，不自動換行

wrap：會自動換行

wrap-reverse：反著換行

justity-content：水平對齊方式

flex-start：預設值，居左

flex-end：居右

center：居中

space-between：兩端對齊，元素之間間距相等

space-around：每個專案兩側之間的距離相等

align-items：垂直對齊方式

flex-start：從上到下

flex-end：從下到上

center：居中

baseline：對齊第一行文字

strech：預設，如果元素未設定高度，或者將高度設為auto，將會佔滿整個父元素

order：排序，預設為0

flex

flex 有3個引數，分別代表

• flex-grow：放大的比例，0為不放大，1為填充剩餘空間，預設0；
• flex-shrink：縮小的比例，0為不縮小，1為等比例縮小，預設1；
• flex-basis：在分配空間前，元素優先佔據的空間，可以像width那樣設定一個寬度，佔據一個固定空間，不在參與後續空間分配。

如下程式碼，完成了一個左邊固定200px寬選單，右邊自適應內容的佈局

// html
<div class="container">
    <div class="menu"></div>
    <div class="content"></div>
</div>

// css
.container{
    display: flex;
}
.menu{
    flex: 0 0 200px;
}
.content{
    flex: 1;
}

（未完，待續…）

---

一句話日記：又快12點了，一篇部落格快一小時還沒寫完，什麼時候才能真正提效