使用 CSS3 Flexible Boxes 布局

boredream 發布于2019-08-28 17:56 / 1817人閱讀

摘要：對于塊級元素來說，布局的延伸方向是自上而下的，也就是縱向。而對于行內元素來說，布局延伸方向是自左往右的，也就是橫向。當屬性值相加時，元素并不會溢出，而是表現為兩兩之間所占空間大小遵循相互的百分比比值。

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

瀏覽器兼容性

作為非常現實的開發者，是否對一個新技術進行關注，首先要考慮它的瀏覽器兼容性如何。我們的伸縮盒模型的瀏覽器兼容性看起來還是相當不錯的。

可以看到，現代瀏覽器基本上都支持了，IE10開始也支持了（IE和Safari分別加-ms-和-webkit-前綴即可），移動端的支持情況也比較良好，唯一不支持的平臺只有Opera了，咱不帶他玩→_→

因此，奧巴馬同志說：伸縮盒模型是好的，有前途的。（嗯嗯~）

伸縮盒基本概念

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

Voilà!

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

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

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

是不是很方便？

Axes 軸
我們可以看到，圖中有兩條軸，分別標注了主軸和次軸（垂直于主軸）。然而實際上哪一條是主軸并不確定，是由我們來規定的。
1. flex-direction 此屬性規定哪條軸為主軸。
2. justify-content 此屬性設置了伸縮項在主軸方向上的排列方式，這個稍后解釋。
3. align-items 此屬性和上面的justify-content相對，表示伸縮項在次軸上的排列方式。
4. 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布局模式在響應式開發中尤其好用，對不同的終端，設置元素之間的空間分配關系將會變成一件非常簡單的事。伸縮盒布局和響應式布局中流行的流體布局哪種更好，還是可以結合起來，就看各位開發者發揮自己的聰明才智了！

參考文獻

http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

http://www.zhangxinxu.com/wordpress/?p=1338

GPU云服務器云服務器 flexible boxes css3 css3氣泡

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

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

CSS3 - 伸縮盒模型 Flexible Box Layout

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

bingchen 2019-08-02 16:09 評論0 收藏0
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
CSS中各種布局的背后(*FC)

摘要：中各種布局的背后，實質上是各種的組合。相反，一些塊容器盒，比如非替換行內塊及非替換表格單元格，不是塊級盒。描述元素跟它的后代之間的影響。行盒行盒由行內格式化上下文產生的盒，用于表示一行。彈性容器外和彈性項目內的一切元素都不受影響。 CSS中各種布局的背后，實質上是各種*FC的組合。CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 評論0 收藏0
【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

nihao 2019-08-02 15:35 評論0 收藏0
【Hello CSS】第六章-文檔流與排版

摘要：作者陳大魚頭正常流什么是正常流其實就是我們日常所說的文檔流。在官方文檔里對應的是。然后，包含形成一條線的框的矩形區域稱為線盒。基線線盒的高度由的計算結果決定。級層疊上下文被自動視為父級層疊上下文的一個獨立單元。自由分配，由具體情況決定。作者：陳大魚頭 github： KRISACHAN 正常流什么是正常流？其實就是我們日常所說的文檔流。在W3C官方文檔里對應的是normal ...

null1145 2019-08-30 11:27 評論0 收藏0