關於flexbox

在某些簡單的響應式佈局應用場景上，是沒有必要用bootstrap的，想必不少同窗也已經在開始嘗試用flexbox去手動實現本身的佈局了。今天總結一下flexbox的用法。

設置flexbox

第一步你須要一個父容器

.container {
    display: flex;
}複製代碼

flex or inline-flex?

.container {
    display: inline-flex;
}複製代碼

上面這種寫法，表示我除了想要讓個人子元素變爲flex佈局外，我這個父容器也變成flex佈局，codepen.io/clairecodes… 直接看對比例子

justify-content屬性

寫在父容器裏，用於設置子元素的水平佈局

.container {
    display: flex;
    justify-content: center;
}複製代碼

可能的值有：

flex-start：緊挨着的放在開頭（默認是左邊，由flex-direction設置）

center：緊挨着的放在中間

space-around：每一個元素都有等寬的空白包裹，包括第一個的前面和最後的元素後面

space-between：每一個元素之間都有等寬的空白

flex-end：緊挨着的放在後面

align-content屬性

跟上面值相同，對垂直方向子元素佈局，若是子元素wrap到多行，能用space-around/between控制空白的空間

align-items屬性

若是子元素高度比父容器矮的話，也是在垂直方向上對子元素佈局。可是不控制空白部分，而是提供拉伸選項

.container {
    display: flex;
    align-items: center;
}複製代碼

可能的值有

flex-start，center，flex-end比較好理解不解釋

stretch：若是子元素沒有高度的話，會被拉伸填滿父容器高度，若是有高度，則不拉伸

baseline：按基線對齊，所謂基線，理解爲內容的下邊界

align-self屬性

用於子元素，調整本身在垂直方向的佈局，值跟上面同樣

.child {
    align-self: center;
}複製代碼

flex-direction屬性

設置子元素的方向

.container {
    display: flex;
    flex-direction: row;
}複製代碼

值

row：從左往右

row-reverse：從右往左

column：從上往下

column-reverse：從下往上

flex-wrap屬性

值wrap自動換行，nowrap不換行，wrap-reverse：換行後把行翻轉

flex-flow屬性

上面兩個的簡寫

.container {
    display: flex;
    flex-flow: row wrap;
}複製代碼

order屬性

默認爲0，寫在子元素上，若是給定了數字，那麼會跟其餘的作對比而重排順序。父容器要指定flex才行

.child {
    order: -1;
}複製代碼

flex-grow屬性

設置子元素自適應寬度，計算方式是：剩餘的空間按比例分配（增長）給各個子元素

.child1 {
    flex-grow: 1;
}
.child2 {
    flex-grow: 2;
}複製代碼

剩餘空間指的是：若是child指定了width或者flex-basis或者有內容（好比有字），先按這種寬度排版，而後父容器寬度減去上面的寬度，所剩下的寬度。

最後把這個寬度按上面例子1比2加回給這兩個元素，最終獲得的寬度不必定是1比2。若是子元素沒有設置寬度，那麼理所固然的剩餘寬度就是整個父容器寬，這樣你看到的效果就正好是兩個子元素按1比2分配

flex-shrink屬性

與上面類似，可是是把多出父容器的部分按比例從子元素減出， 好比父親寬500，兩個子元素以下

.child1 {
    flex-basis: 300px;
    flex-shrink: 1;
}
.child {
    flex-basis: 500px;
    flex-shrink: 2;
}複製代碼

那麼多出來的300按比例分派 （300/3=）100和（300*2/3=）200，因此最終child1寬200，child2寬300.

flex-basis屬性

設置flex子元素初始寬如上，可爲%

flex屬性

上面仨的簡寫

.child {
    flex: 1 1 100px;
}複製代碼