Flexbox布局

剛開始接觸flex布局的時候，只知道它可以用來使子元素水平垂直居中，代碼最為簡潔好用。

.container {display: flex;justify-content: center;align-items: center; }

當然不僅僅是居中問題，flexbox能做的事情大多，能夠簡單快速解決我們布局所遇到的問題，例如：

• 可以輕松實現兩列、多列布局自適應屏幕的大小，而無需設置塊浮動
• 如果元素容器沒有足夠的空間，無需重新計算每個子元素的寬度，就可以設置它們在同一行
• 可以快速讓子元素布局在一列，如小屏幕的時候
• 可以讓在子元素相對容器居上、下、左、右、中布局
• 可以通過屬性order隨時改變元素出現的順序，無需改變HTM結構，以便適應屏幕大小不同和設備差異
• 如果元素容器設置百分比sui視窗大小改變，不用提心未指定元素的確切寬度而破壞布局，因為容器中的每個子元素都可以自動分配容器的寬度或高度的比例

瀏覽器對最新規范flexbox的支持情況如下：

Flex布局概念

• 彈性布局是指通過調整其內元素的寬高，從而在任何顯示設備上實現對可用顯示空間最佳填充的能力。彈性容器擴展其內元素來填充可用空間，或將其收縮來避免溢出。
• flex布局模型不同于塊和內聯模型布局，塊和內聯模型的布局計算依賴于塊和內聯的流方向，而flex布局依賴于flex directions。

Flex container(Flex 容器)

1.flex container

• display

  display: other values | flex | inline-flex

  其中1，2，3，4為div塊
  

2.Orientation

• flex-direction(設置flex容器的主軸方向，指定flex項目在flex容器中的排列方式，水平和縱向兩種。)

  flex-direction: row | row-reverse | column | column-reverserow（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上端。column-reverse：主軸為垂直方向，起點在下端。
  

• flex-wrap（默認不換行，設置了換行wrap/wrap-reverse后，子元素大小總和大于容器大小即換行）

  flex-wrap: nowrap | wrap | wrap-reversenowrap(默認值)：不換行wrap：伸縮容器多行顯示wrap-reverse：和wrap相反

• flex-flow: <‘flex-direction’> || <‘flex-wrap’>(縮寫)

  flex-flow: row nowrap; /* default */

3.Alignment

• justify-content(指定flex項目在flex容器沿著主軸在當前行的對齊方式。)

  justify-content: flex-start | flex-end | center | space-between | space-around

  其中

  space-around的第一個Flex項目左邊的間距和最后一個Flex項目右邊的間距是其他相相鄰flex項目之間間的一半。

• align-items(指定flex項目在flex容器沿著側軸在當前行的對齊方式。)

  align-items: flex-start | flex-end | flex-center | base-line | stetch

• align-content(針對多行、當你設定flex-wrap: wrap;且容器側軸大小空間不夠)

  align-content: flex-start | flex-end | center | space-between | space-around | strecth

4.Flex容器無效屬性

• ::first-line || ::first-letter
• column-*屬性

Flex items（Flex 項目）

1.Ordering

• order(改變某個flex-item在頁面中出現的順序，order值小的排在前面)
  

2.Alignment

• align-self（單獨設置某個flex-items的屬性，覆蓋align-items設置的樣式）

  align-self: auto | flex-start | flex-end | flex-center | baseline | stretch

3.Flexibility

• flex-grow

  flex-grow: <number>; /* default 0 */ 按比例劃分空間，其中“3”塊由1/8→2/8→6/8
  

• flex-shrink(與grow相反)

  flex-shrink: <number>; /* default 1 */

• flex-basis(定義項目占據主軸main size的空間)

  flex-basis: <length> | auto; /* default auto */

  下面這個 GIF 表示的是它和 width 屬性是可以互換的。（但是不完全是這樣）
  
  注意：flex-basis 和 width 不同的地方是，它是和 flex 坐標軸保持一致的，flex-basis是影響主軸上大小。

設置一定大小的flex-basis值后，改變主軸的方向

這個時候改變height，而不是width，flex-basis 根據 flex-direction 的不同會影響到 width 或者 height。

• flex（默認值為0 1 auto）

  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

測試所有屬性

Flexbox Playground

實例

demo1：上面的效果demo
demo2:另一個博客結構例子

適用場景

彈性盒子布局主要適用于應用程序的組件及小規模的布局，而（新興的）柵格布局則針對大規模的布局

拓展閱讀

• 響應式柵格系統
• Flexbox與網格系統的異同、各自的適用場景

參考資料

• Flexbox布局W3C官方文檔：在學習和閱讀其他一些比較老的文章的時候，一定要閱讀官方的最新文檔說明，一些老的文章可能使用的是老的語法，而新的規范、新的技術在不斷更新。
• 使用 CSS 彈性盒子
• Flexbox詳解
• 圖解CSS3 Flexbox屬性
• 通過動圖形象地為你介紹 flexbox 是如何工作的
• Flex入門

總結

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

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