CSS3 - 伸縮盒模型 Flexible Box Layout

bingchen 發布于2019-08-02 16:09 / 1839人閱讀

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

參考鏈接

使用 CSS3 Flexible Boxes 布局

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

Flexible Box是什么？

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

瀏覽器支持

伸縮盒基本概念

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

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

伸縮盒模型基本術語

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

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

Flex item 伸縮項
房子里的居民，他們都會占有自己應得的住房面積。

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

    
      item 1
      item 2
      item 3

CSS設置為：

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

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

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

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

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

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

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

flex-direction 此屬性規定哪條軸為主軸。

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

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

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

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

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

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

當此屬性設置為column時，主次軸就會對調，元素的排列方向也會隨之改變：

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

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

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

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

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

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

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

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

說到這里了，伸縮項具體的表現其實可以想象出來了，想象不出來的就自己動手試一試吧~
order
在伸縮項上聲明此屬性，可以無視HTML結構的順序而按照 order 從小到大的順序沿 flex-direction 方向排列。比如：

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

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

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

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

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

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

云服務器 GPU云服務器盒模型盒模型html嗎簡述html盒模型 flexible

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54758.html

CSS3 - 伸縮盒模型 Flexible Box Layout

摘要：比如此屬性的默認值為，也就是忽略伸縮項的寬度，管你要多少住房面積，通通按照屬性說好的分配，不許換行。，和上文提到的屬性實際上是這三個屬性的簡寫形式。參考鏈接使用 CSS3 Flexible Boxes 布局菜鳥教程鏈接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意為可伸縮的，Box意為盒子，可以理解為...

gecko23 2019-08-30 15:43 評論0 收藏0
使用 CSS3 Flexible Boxes 布局

摘要：對于塊級元素來說，布局的延伸方向是自上而下的，也就是縱向。而對于行內元素來說，布局延伸方向是自左往右的，也就是橫向。當屬性值相加時，元素并不會溢出，而是表現為兩兩之間所占空間大小遵循相互的百分比比值。 Flexible Box是什么？Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規范提出，這是在原有的大家非常熟悉的block, inl...

boredream 2019-08-28 17:56 評論0 收藏0
WEB前端資源代碼：CSS篇

摘要：誤區注意只是動態分配父元素的剩余空間，而不是整個父元素的空間。默認值如果項目未設置高度或設為，將占滿整個容器的高度。負值對該屬性無效。高像素密度設備相應放大，像素密度設備相應縮小。css3新單位vw、vh、vmin、vmax vh: 相對于視窗的高度, 視窗被均分為100單位的vh; vw: 相對于視窗的寬度, 視窗被均分為100單位的vw; vmax: 相對于視窗的寬度或高度中較大的那...

番茄西紅柿 2019-04-23 13:15 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0