10分鐘徹底掌握 CSS Flex 布局

家好，我是Echa。最近比較忙，今天就來分享一篇之前寫的筆記吧，希望對你有所幫助~

CSS 中的 Flex 布局是一種一維的布局模型，一次只能處理一個維度上的元素布局，一行或者一列。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。下面就來看看如何在 CSS 中使用 Flex 布局！

基本概念

Flexbox 布局也叫 Flex 布局，彈性盒子布局。它的目標(biāo)是提供一個更有效地布局、對齊方式，并且能夠使父元素在子元素的大小未知或動態(tài)變化情況下仍然能夠分配好子元素之間的間隙。

主要思想是使父元素能夠調(diào)整子元素的寬度、高度、排列方式，從而更好地適應(yīng)可用的布局空間。設(shè)定為flex布局的元素能夠放大子元素使之盡可能填充可用空間，也可以收縮子元素使之不溢出。

Flex布局更適合小規(guī)模的布局，可以簡便、完整、響應(yīng)式的實現(xiàn)各種頁面布局。但是，設(shè)為Flex布局以后，其子元素的float、clear和vertical-align屬性將失效。Flex彈性盒模型的優(yōu)勢在于只需聲明布局應(yīng)該具有的?為，?不需要給出具體的實現(xiàn)?式，瀏覽器負(fù)責(zé)完成實際布局，當(dāng)布局涉及到不定寬度，分布對?的場景時，就要優(yōu)先考慮彈性盒布局。

Flex 布局是一個完整的模塊，它包括了一套完整的屬性。其中采用 Flex 布局的元素，稱為 Flex 容器，簡稱"容器"。它的所有子元素就是容器成員，稱為 Flex 項目，簡稱"項目"。

容器默認(rèn)存在兩個軸：水平軸（main axis）和垂直軸（cross axis），項目默認(rèn)沿主軸排列（水平軸）：

這里面涉及到了幾個概念，下面來看一下：

main axis: Flex 父元素的主軸是指子元素布局的主要方向軸，它由屬性flex-direction來確定主軸是水平還是垂直的，默認(rèn)為水平軸。
main-start & main-end: 分別表示主軸的開始和結(jié)束，子元素在父元素中會沿著主軸從main-start到main-end排布。
main size: 單個項目占據(jù)主軸的長度大小。
cross axis: 交叉軸，與主軸垂直。
cross-start & cross-end: 分別表示交叉軸的開始和結(jié)束。子元素在交叉軸的排布從cross-start開始到cross-end。
cross size: 子元素在交叉軸方向上的大小。

容器屬性

想要使用flex布局，首先需要給父元素指定為flex布局，這樣容器內(nèi)的元素才能實現(xiàn)flex布局：

<div class="container"></div>

.container {
    display: flex | inline-flex;
}

這里有兩種方式可以設(shè)置flex布局，使用display: flex;會生成一個塊狀的flex容器盒子，使用display: inline-flex;會生成一個行內(nèi)的flex容器盒子。如果我們使用塊狀元素，比如div標(biāo)簽，就可以使用flex，如果使用行內(nèi)元素，就可以使用inline-flex。多數(shù)情況下，我們會使用 display: flex;。

父元素（容器）可以設(shè)置以下六個屬性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1. flex-direction

flex-direction：主軸方向，它決定了容器內(nèi)元素排列方向，它有四個屬性值：

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

（1）flex-direction: row：默認(rèn)值，沿水平主軸從左到右排列，起點在左沿

（2）flex-direction: row-reverse：沿水平主軸從右到左排列，起點在右沿

（3）flex-direction: column：沿垂直主軸從上到下排列，起點在上沿

（4）flex-direction: column-reverse：沿垂直主軸從下到上排列，起點在下沿

2. flex-wrap

flex-wrap：容器內(nèi)元素是否可以換行，它有三個屬性值：

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）flex-wrap: nowrap：默認(rèn)值，不換行。當(dāng)主軸的長度是固定并且空間不足時，項目尺寸會隨之進(jìn)行調(diào)整，而不會換行。

（2）flex-wrap: wrap：換行，第一行在上面

（3）flex-wrap: wrap-reverse：換行，第一行在下面

3. flex-flow

flex-flow 是 flex-direction 屬性和flex-wrap屬性的簡寫，默認(rèn)為:flex-flow:row nowrap，用處不大，最好還是分開來寫。該屬性的書寫格式如下：

.container {
    flex-flow: <flex-direction> <flex-wrap>;
}

4. justify-content

justify-content：元素在主軸的對齊方式，它有五個屬性值：

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

這里以水平方向為主軸進(jìn)行舉例，即flex-direction: row。

（1）justify-content : flex-start：默認(rèn)值，元素在主軸上左對齊（上對齊）

（2）justify-content : flex-end：元素在主軸上右對齊（下對齊）

（3）justify-content : center ：元素在主軸上居中對齊

（4）justify-content : space-between：元素在主軸上兩端對齊，元素之間間隔相等

（5）justify-content : space-around ：每個項目兩側(cè)的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

5. align-items

align-item：元素在交叉軸上的對齊方式，它有五個屬性值：

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

這里以水平方向為主軸進(jìn)行舉例，即flex-direction: row。

（1）align-item：flex-start：交叉軸的起點對齊（上面或左邊）。設(shè)置容器高度為 100px，項目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：

（2）align-item：flex-end：交叉軸的終點對齊（下面或右邊）。設(shè)置容器高度為 100px，項目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：

（3）align-item：center：交叉軸的中點對齊。設(shè)置容器高度為 100px，項目高度分別為 20px、40px、60px、80px、100px，效果如圖所示：

（4）align-item：stretch：默認(rèn)值、如果元素未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。假設(shè)容器高度設(shè)置為 100px，而項目沒有設(shè)置高度，則項目的高度也為 100px：

（5）align-item：baseline：以元素的第一行文字的基線對齊

6. align-content

align-content：多根軸線對齊方式。如果元素只有一根軸線，該屬性不起作用。它有六個屬性值：

.container {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

那這個軸線數(shù)怎么確定呢？實際上這主要是由flex-wrap屬性決定的，當(dāng)flex-wrap 設(shè)置為 nowrap 時，容器僅存在一根軸線，因為項目不會換行，就不會產(chǎn)生多條軸線。當(dāng) flex-wrap 設(shè)置為 wrap 時，容器可能會出現(xiàn)多條軸線，這時就需要去設(shè)置多條軸線之間的對齊方式。

這里以水平方向為主軸時舉例，即：flex-direction: row; flex-wrap: wrap;

（1）align-content: stretch：默認(rèn)值，軸線占滿整個交叉軸。這里我們先設(shè)置每個項目都是固定寬度，效果如下：

下面就去掉每個項目的高度，它會占滿整個交叉軸，效果如下：

（2）align-content: flex-start：從交叉軸開始位置填充

（3）align-content: flex-end：從交叉軸結(jié)尾位置填充

（4）align-content: center：與交叉軸中點對齊

（5）align-content: space-between：與交叉軸兩端對齊，軸線之前的間隔平均分布

（6）align-content: space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

項目屬性

子元素有以下六個屬性：

order
flex-grow
flex-shrink
flex-basis
flex
align-self

1. order

order屬性用來定義項目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。使用形式如下：

.item {
    order: <integer>;
}

2. flex-basis

flex-basis屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間，瀏覽器會根據(jù)這個屬性來計算主軸是否有多余空間。它的默認(rèn)值為auto，即項目的本來大小。使用形式如下：

.item {
    flex-basis: <length> | auto;
}

當(dāng)主軸設(shè)置為水平時，當(dāng)設(shè)置了 flex-basis，設(shè)置的項目寬度值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能生效。有兩種特殊的值：

當(dāng) flex-basis 值為 0 % 時，項目尺寸會被認(rèn)為是0，因此無論項目尺寸設(shè)置多少都用；
當(dāng) flex-basis 值為 auto 時，則跟根據(jù)尺寸的設(shè)定值來設(shè)置大小。

3. flex-grow

flex-grow屬性定義項目的放大比例，默認(rèn)為0，即如果存在剩余空間時也不放大。

當(dāng)容器中所有的項目都設(shè)置了flex-basis屬性時，如果仍有是剩余的空間，設(shè)置的 flex-grow屬性才能生效。

如果所有項目的flex-grow屬性都設(shè)置為1，那么它們會均分剩余的空間，如下圖所示：

如果其中一個項目的flex-grow屬性設(shè)置為2，其他均為1，那么它占據(jù)的剩余空間就是其他項目的兩倍，如下圖所示：

4. flex-shrink

flex-shrink屬性定義了項目的縮小比例，默認(rèn)為1，即如果空間不足，該項目將縮小。不能設(shè)置負(fù)值，使用形式如下：

.item {
    flex-shrink: <number>;
}

如果所有項目的 flex-shrink 屬性都為 1，當(dāng)空間不足時，都將等比例縮小，如下圖所示：

如果一個項目的 flex-shrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小，如下圖所示：

5. flex

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，后兩個屬性可選。默認(rèn)值為：flex:0 1 auto。使用形式如下：

.item{
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

對于flex的取值有幾種常用的特殊情況：

（1）默認(rèn)值：flex:0 1 auto，即在有剩余空間時，只放大不縮小

.item {
  flex:0 1 auto;
}
.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

（2）flex: none，即有剩余空間時，不放大也不縮小，最終尺寸通常表現(xiàn)為最大內(nèi)容寬度。

.item {
  flex:0 0 auto;
}
.item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

（3）flex: 0，即當(dāng)有剩余空間時，項目寬度為其內(nèi)容的寬度，最終尺寸表現(xiàn)為最小內(nèi)容寬度。

.item {
  flex:0 1 0%;
}
.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0%;
}

（4）flex: auto，即元素尺寸可以彈性增大，也可以彈性變小，具有十足的彈性，但在尺寸不足時會優(yōu)先最大化內(nèi)容尺寸。

.item {
  flex:1 1 auto;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

（5）flex: 1，即元素尺寸可以彈性增大，也可以彈性變小，具有十足的彈性，但是在尺寸不足時會優(yōu)先最小化內(nèi)容尺寸，

.item {
  flex:1 1 0%;
}
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

6. align-self

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

這個屬性和align-items屬性的效果是一樣的，只不過這個屬性只對單個項目生效，而align-items是對容器中所有的項目生效。

設(shè)置容器的align-items屬性為flex-start，容器中第三個項目的align-self屬性為flex-end，效果如下：

如果覺得這篇文章有用，就點贊、轉(zhuǎn)發(fā)、評論、在看吧！

擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來

前言

在css3到來之前，都是用js來操作dom元素，計算位置，大小，形成瀑布流布局。但是有了css3之后，一切實現(xiàn)起來就太簡單了，沒有復(fù)雜的邏輯，輕松的幾行樣式代碼就可以搞定。

回顧以前（js瀑布流）

基于waterfall.js（11.8kb）,還得寫入基礎(chǔ)的樣式，初始化等等，對比其他js，已經(jīng)是很簡單了。

var waterfall=new WaterFall({ 
 container: '#waterfall', 
 pins: ".pin", 
 loader: '#loader', 
 gapHeight: 20, 
 gapWidth: 20, 
 pinWidth: 216, 
 threshold: 100 
});

但是，有了css3，再簡潔的js，都比不過簡單的css代碼。

display: flex

關(guān)鍵點，橫向 flex 布局嵌套多列縱向 flex 布局，使用了 vw 進(jìn)行自適應(yīng)縮放

// pug 模板引擎
div.g-container
 -for(var i=0; i<4; i++)
 div.g-queue
 -for(var j=0; j<8; j++)
 div.g-item

不熟悉pug模板（jade）的，可以先去了解一下。其實看大致也就懂了，就是循環(huán)多個元素，沒有復(fù)雜的邏輯。

$lineCount: 4;
$count: 8;
// 隨機數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 overflow: hidden;
}
.g-queue {
 display: flex;
 flex-direction: column;
 flex-basis: 24%;
}
.g-item {
 position: relative;
 width: 100%;
 margin: 2.5% 0;
}
@for $i from 1 to $lineCount+1 {
 .g-queue:nth-child(#{$i}) {
 @for $j from 1 to $count+1 {
 .g-item:nth-child(#{$j}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 // 瀑布流某塊中間的數(shù)字
 &::after {
 content: "#{$j}";
 position: absolute;
 color: #fff;
 font-size: 24px;
 // 水平垂直居中
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
 }
 }
}

預(yù)覽：

CSS 實現(xiàn)瀑布流布局（display: flex）

演示地址：點擊文章結(jié)尾“了解更多”

column-count

關(guān)鍵點， column-count: 元素內(nèi)容將被劃分的最佳列數(shù) break-inside: 避免在元素內(nèi)部插入分頁符

// pug 模板引擎
div.g-container
 -for(var j=0; j<32; j++)
 div.g-item

column-count 看起來比display: flex更科學(xué)，模板不需要2層循環(huán)，更簡潔明了。如果真正用到數(shù)據(jù)上面，會更好處理。

$count: 32;
// 隨機數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 column-count: 4;
 column-gap: .5vw;
 padding-top: .5vw;
}
.g-item {
 position: relative;
 width: 24vw;
 margin-bottom: 1vw;
 break-inside: avoid;
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 height: #{randomNum(300, 50)}px;
 background: randomColor();
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}

預(yù)覽：

CSS 實現(xiàn)瀑布流布局（column-count）

演示地址：點擊文章結(jié)尾“了解更多”

display: grid

關(guān)鍵點，使用 grid-template-columns、grid-template-rows 分割行列使用 grid-row 控制每個 item 的所占格子的大小

// pug 模板引擎
div.g-container
 -for(var i=0; i<8; i++)
 div.g-item

樣式

$count: 8;
// 隨機數(shù)（瀑布流某塊的高度）
@function randomNum($max, $min: 0, $u: 1) {
 @return ($min + random($max)) * $u;
}
// 隨機顏色值
@function randomColor() {
 @return rgb(randomNum(255), randomNum(255), randomNum(255));
}
.g-container {
 height: 100vh;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: repeat(8, 1fr);
}
@for $i from 1 to $count+1 {
 .g-item:nth-child(#{$i}) {
 position: relative;
 background: randomColor();
 margin: 0.5vw;
 &::after {
 content: "#{$i}";
 position: absolute;
 color: #fff;
 font-size: 2vw;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 }
 }
}
.g-item {
 &:nth-child(1) {
 grid-column: 1;
 grid-row: 1 / 3;
 }
 &:nth-child(2) {
 grid-column: 2;
 grid-row: 1 / 4;
 }
 &:nth-child(3) {
 grid-column: 3;
 grid-row: 1 / 5;
 }
 &:nth-child(4) {
 grid-column: 4;
 grid-row: 1 / 6;
 }
 &:nth-child(5) {
 grid-column: 1;
 grid-row: 3 / 9;
 }
 &:nth-child(6) {
 grid-column: 2;
 grid-row: 4 / 9;
 }
 &:nth-child(7) {
 grid-column: 3;
 grid-row: 5 / 9;
 }
 &:nth-child(8) {
 grid-column: 4;
 grid-row: 6 / 9;
 }
}

display: grid樣式上面感覺也不好用，需要書寫很多grid-column、grid-row。

預(yù)覽：

CSS 實現(xiàn)瀑布流布局（display: grid）

演示地址：點擊文章結(jié)尾“了解更多”

總結(jié)

通過，這3種CSS瀑布流布局，你更喜歡哪一種呢？

個人更喜歡column-count，看起來更加清晰，容易理解，代碼量也很少。

公告

喜歡小編的點擊關(guān)注，了解更多知識！

源碼地址請點擊下方“了解更多”

是一個用vue.js對css操作完成的實例。
當(dāng)然用了flex簡單布局。

一、先創(chuàng)建一個html文件，記得添加vue庫文件。

二、創(chuàng)建一盒容器vmdiv，用vue綁定它，測試vue綁定后的插入值text1效果。

三、加入文本框和兩個按鈕。

四、通過flex排序，讓它們?nèi)齻€豎排。比例為文本框占4，按鈕占1。

五、測試一下按鈕的點擊事件。

六、給文本框添加style樣式，給它字體大小為16px，并設(shè)置一個變量size，讓它來控制字的大小，通過點擊后，字變大加5，變小減5。

在線咨詢

上一篇：HTML DOM Keygen 對象
下一篇：這一款開源免費的富文本編輯器，是值得推薦的-Quil

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

10分鐘徹底掌握 CSS Flex 布局

基本概念

容器屬性

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content

5. align-items

6. align-content

項目屬性

1. order

2. flex-basis

3. flex-grow

4. flex-shrink

5. flex

6. align-self

前言

回顧以前（js瀑布流）

display: flex

column-count

display: grid

總結(jié)

公告

您的項目需求