什么是彈性盒子？

彈性盒子是 CSS3 的一種新的布局模式。相對于傳統的依賴于display+position+float的布局方式，彈性盒子更加以有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

如何開啟？

任何一個容器都可以指定為Flex布局，你需要的僅僅是增加一行

display: flex;

如果是行內元素的話則是

display: inline-flex;

注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

相關概念

被指定為Flex的元素稱之為"容器"，該容器當中的子元素則是會成為它的“項目”，一個元素可以既是容器也是項目。

如上圖所示，一個容器當中存在兩根軸，默認為主軸的水平軸，默認為交叉軸的垂直軸。默認情況下容器當中的項目是沿著主軸方向排列的。

容器屬性

• flex-direction： 該屬性決定主軸的方向

  屬性值為：row(默認)、row-reverse、column、column-reverse，分別對應的主軸以及起點為左、右、上、下。

• flex-wrap： 是否換行

  屬性值為：nowrap(默認)、 wrap、wrap-reverse，分別對應不換行，換行，換行且第一行放在下面。

• justify-content： 主軸上對齊方式

  屬性值為：flex-start（默認）、flex-end、center、space-between、space-around，分別對應為起點對齊、終點對齊、居中對齊，兩端對齊，左右間隔相等對齊（可以看做左右設置不重疊的margin）。

• align-items： 交叉軸對齊方式

  屬性值為：flex-start、flex-end、center、baseline、stretch（默認），分別對應起點、終點、居中、第一行文字基線、占滿容器高度（默認，未設置高度或者auto情況下）

• align-content： 多軸線對齊方式
  注意：只有一根軸的時候無效，也就是單行項目是無效的。
  注意：這里的多軸線是多行的意思，不是指代垂直水平兩根軸。

  屬性值為：flex-start、flex-end、center、space-between、space-around、stretch（默認），分別對應交叉軸的起點、終點、居中、兩端、相同間隔、占滿（可以看做平均分配了，但是項目設置寬高的話，空間上會平均分配，但是項目本身寬高不會變）

項目屬性

• order： 排列順序，越小的排前面，默認為0
• flex-grow： 放大比例，默認為0，如果所有都為1，等分剩余空間
• flex-shrink： 縮小比例，默認為1
• flex-basis： 設置固定寬高，可以占據固定空間，默認auto
• flex：flex-grow flex-shrink flex-basis的簡寫，后兩個可選
• align-self： 項目單獨對齊方式（脫離大部隊啊！）可覆蓋align-items屬性

實用Flex應用

應用場景：

1 瀏覽器的視口空間不足，要求視口中的特定塊要按照比例進行縮放
2 應對一些布局是要以基準線(baseline)對齊的特殊布局方法
3 需要模塊垂直居中

• 基本網格布局
  也就是每一行自適應且等分空間，通過項目的flex屬性設置

flex: 1;

• 百分比布局
  同樣是利用項目的flex屬性，為第三個值設定百分比占據固定百分比。

flex: 0 0 20%;

• 圣杯布局
  傳統圣杯布局實現麻煩，使用flex后僅僅需要改變nav欄目的order比main小就行

order: -1;

參考

Flex 布局教程：語法篇

Flex 布局教程：實例篇

W3C-CSS3教程

轉載于:https://www.cnblogs.com/souldee/p/9360772.html

總結

以上是生活随笔為你收集整理的Flex布局及其应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。