CSS3 - 伸縮盒模型 Flexible Box Layout

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

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

參考鏈接

使用 CSS3 Flexible Boxes 布局

菜鳥教程鏈接：http://www.runoob.com/css3/cs...

Flexible Box是什么？

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

瀏覽器支持

伸縮盒基本概念

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

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

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

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

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

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

為了形象說明，我們用代碼來解釋。

    
      item 1
      item 2
      item 3

CSS設(shè)置為：

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

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

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

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

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

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

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

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

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

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

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

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

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

顧名思義，這會讓伸縮項(xiàng)的排列方向反過來：

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

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

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

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

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

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

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

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

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

說到這里了，伸縮項(xiàng)具體的表現(xiàn)其實(shí)可以想象出來了，想象不出來的就自己動手試一試吧~
order
在伸縮項(xiàng)上聲明此屬性，可以無視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 屬性說好的分配，不許換行。

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

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

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

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