CSS3 - 伸縮盒模型 Flexible Box Layout

gecko23 發(fā)布于2019-08-30 15:43 / 1363人閱讀

摘要：比如此屬性的默認(rèn)值為，也就是忽略伸縮項(xiàng)的寬度，管你要多少住房面積，通通按照屬性說(shuō)好的分配，不許換行。，和上文提到的屬性實(shí)際上是這三個(gè)屬性的簡(jiǎn)寫(xiě)形式。

參考鏈接

使用 CSS3 Flexible Boxes 布局

菜鳥(niǎo)教程鏈接：http://www.runoob.com/css3/cs...

Flexible Box是什么？

Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型---伸縮盒模型。由CSS3規(guī)范提出，這是在原有的大家非常熟悉的 block,?inline-block,?inline 的基礎(chǔ)上延伸出的新一代布局模式。

瀏覽器支持

伸縮盒基本概念

伸縮盒的最大特點(diǎn)或者說(shuō)優(yōu)點(diǎn)就在于它考慮到了現(xiàn)今高昂的房?jī)r(jià)和人民日益增長(zhǎng)的住宅需求之間的矛盾，房屋面積是有限的，但是我們的伸縮盒能夠最合理最高效地把房子分給大家。面積多了，就給大家伙多分點(diǎn)；面積小了，就讓各位擠一擠少分點(diǎn)，總而言之不會(huì)讓任何一個(gè)人露宿街頭的（overflow）！

既然我們提到了房子和住戶的關(guān)系，那么住戶的排列自然需要沿一定的方向。對(duì)于塊級(jí)元素來(lái)說(shuō)，布局的延伸方向是自上而下的，也就是縱向。而對(duì)于行內(nèi)元素來(lái)說(shuō)，布局延伸方向是自左往右的，也就是橫向。而伸縮盒呢，它的方向是可變的，既能縱向延伸，也能橫向舒展，這取決于你的設(shè)置了。

伸縮盒模型基本術(shù)語(yǔ)

伸縮盒模型的思想和普通的塊級(jí)元素和行內(nèi)元素的布局思想有較大的不同，它引入了一些新的概念和術(shù)語(yǔ)，通過(guò)下面這張圖來(lái)了解一下：

Flex container 伸縮盒容器
這就是用來(lái)分的房子，這是一間神奇的房子，要讓它變得神奇，將display屬性聲明為 flex 或 inline-flex 即可~

Flex item 伸縮項(xiàng)
房子里的居民，他們都會(huì)占有自己應(yīng)得的住房面積。

為了形象說(shuō)明，我們用代碼來(lái)解釋。

    
      item 1
      item 2
      item 3

CSS設(shè)置為：

    .container {
      display: flex;
      width: 300px;
      height: 100px;
      ...
    }

在這里 display: inline-flex; 好像也可以。
對(duì)于其中的伸縮項(xiàng)元素，我們需要給他們事先安排好住房面積比例，我們就用最簡(jiǎn)單最健康的1:1:1吧~我們將比例聲明在flex屬性里：

    .item-1 {
      flex: 1;
      ...
    }
    .item-2 {
      flex: 1;
      ...
    }
    .item-3 {
      flex: 1;
      ...
    }

我們的大房子被完美地平分成三個(gè)隔間了，三家平分房租！

如果有人想住大點(diǎn)的房子，我們直接改變flex的比例即可：

    .item-1 {
      flex: 1;
      ...
    }
    .item-2 {
      flex: 1;
      ...
    }
    .item-3 {
      flex: 2;
      ...
    }

Axes 軸
我們可以看到，圖中有兩條軸，分別標(biāo)注了主軸和次軸（垂直于主軸）。然而實(shí)際上哪一條是主軸并不確定，是由我們來(lái)規(guī)定的。

flex-direction 此屬性規(guī)定哪條軸為主軸。

justify-content 此屬性設(shè)置了伸縮項(xiàng)在主軸方向上的排列方式，這個(gè)稍后解釋。

align-items 此屬性和上面的justify-content相對(duì)，表示伸縮項(xiàng)在次軸上的排列方式。

align-self 此屬性規(guī)定某一個(gè)特定的伸縮項(xiàng)元素在次軸上的布局方式，在某個(gè)元素上設(shè)置該屬性會(huì)覆蓋它的 align-items 屬性。也就是這個(gè)屬性會(huì)讓某個(gè)元素更有個(gè)性，不走尋常路~

flex-direction
當(dāng)我們不想沿著默認(rèn)的方向分房子的時(shí)候，我們可以改變flex-direction屬性的值來(lái)改變主軸和方向，該屬性默認(rèn)的取值為row；

    .container {
      flex: row-reverse;
      ...
    }

顧名思義，這會(huì)讓伸縮項(xiàng)的排列方向反過(guò)來(lái)：

當(dāng)此屬性設(shè)置為column時(shí)，主次軸就會(huì)對(duì)調(diào)，元素的排列方向也會(huì)隨之改變：

    .container {
      flex-direction: column;
      ...
    }

至于 flex: column-reverse 的含義就不用我多說(shuō)了吧~

justify-contents
有的時(shí)候，大家挨著住，一點(diǎn)空隙都沒(méi)有也會(huì)很難受，連個(gè)過(guò)道都沒(méi)有，隱私也不能保證對(duì)吧。這個(gè)時(shí)候，我們可以改變分配政策了，不再按比例分配，而是定額分配，每個(gè)人的面積是確定的。多出的房屋面積改成公共區(qū)域。

    .item {
        width: 80px;
        ...
    }
    ...

設(shè)定了 width 屬性后也要記得去掉 flex 屬性的聲明哦，不然flex屬性的效果仍然會(huì)把 width 覆蓋掉~(yú)
同時(shí)，如果width屬性也不設(shè)定的話，元素寬度會(huì)表現(xiàn)為內(nèi)容的寬度，which means 當(dāng)伸縮項(xiàng)內(nèi)部無(wú)內(nèi)容時(shí)，將不會(huì)進(jìn)行渲染，其表現(xiàn)就和 display: none; 一樣。
這時(shí)，在容器上聲明 justify-content 屬性就可以安排伸縮項(xiàng)的位置了：

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

align-items
這項(xiàng)屬性會(huì)改變次軸上元素排列的方式，對(duì)于本例來(lái)說(shuō)原來(lái)次軸方向上元素的高度是表現(xiàn)為height: 100%;的，設(shè)定了align-items屬性后，其高度表現(xiàn)就會(huì)發(fā)生改變了。

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

說(shuō)到這里了，伸縮項(xiàng)具體的表現(xiàn)其實(shí)可以想象出來(lái)了，想象不出來(lái)的就自己動(dòng)手試一試吧~
order
在伸縮項(xiàng)上聲明此屬性，可以無(wú)視HTML結(jié)構(gòu)的順序而按照 order 從小到大的順序沿 flex-direction 方向排列。比如：

.item-1 { order: 3; ...}.item-2 { order: 1; ...}.item-3 { order: 2; ...}

flex-wrap
此屬性的默認(rèn)值為 nowrap，也就是忽略伸縮項(xiàng)的寬度，管你要多少住房面積，通通按照 flex 屬性說(shuō)好的分配，不許換行。

.container { flex-wrap: nowrap | wrap | wrap-reverse}.item { width: 150px;}

flex-grow，flex-shrink 和 flex-basis
上文提到的 flex 屬性實(shí)際上是這三個(gè)屬性的簡(jiǎn)寫(xiě)形式。這三個(gè)屬性有相似性，都是表示項(xiàng)與項(xiàng)之間分配空間的相對(duì)比例關(guān)系，不同之處在于：1.?flex-grow 屬性：屬性值為該伸縮項(xiàng)所占空間相對(duì)于其他伸縮項(xiàng)（聲明了 flex 相關(guān)屬性的項(xiàng)）的比值。2.?flex-shrink 屬性：該伸縮項(xiàng)相對(duì)于其他伸縮項(xiàng)縮小的比值，也就是說(shuō)當(dāng) flex-shrink: 3; 時(shí)，該項(xiàng)所占空間為其他項(xiàng)的1/3。3.?flex-basis 屬性：屬性值為該項(xiàng)所占空間占容器空間的百分比。

注意：
對(duì)于 flex-basis 屬性，當(dāng)所有項(xiàng)的屬性值相加<=100%時(shí)，會(huì)嚴(yán)格按照百分比值來(lái)渲染。當(dāng)屬性值相加>100%時(shí)，元素并不會(huì)溢出，而是表現(xiàn)為兩兩之間所占空間大小遵循相互的百分比比值。也就是說(shuō)當(dāng)存在三個(gè)伸縮項(xiàng)且 flex-basis 值都為50%時(shí)，表現(xiàn)行為與三個(gè)項(xiàng)均為 flex: 1; 一樣。

Flexible Boxes 布局模式在響應(yīng)式開(kāi)發(fā)中尤其好用，對(duì)不同的終端，設(shè)置元素之間的空間分配關(guān)系將會(huì)變成一件非常簡(jiǎn)單的事。伸縮盒布局和響應(yīng)式布局中流行的流體布局哪種更好，還是可以結(jié)合起來(lái)，需要開(kāi)發(fā)者根據(jù)項(xiàng)目需求確定。