Flexbox 是 flexible box 的簡稱（愚人碼頭註：意思是“靈活的盒子容器”），是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列，使它們能在不同的屏幕尺寸和設備下可預測地展現出來。

它之所以被稱為 Flexbox ，是因為它能夠擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與以前布局方式（如 table 布局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：

• 在不同方向排列元素
• 重新排列元素的顯示順序
• 更改元素的對齊方式
• 動態地將元素裝入容器

什麽情況下不建議使用 Flexbox ？

雖然 Flexbox 非常適合縮放，對齊和重新排序元素，但以下情況應該盡量避免使用 Flexbox 布局：

• 整體頁面布局
• 完全支持舊瀏覽器的網站

在 Flexbox 模型中，有三個核心概念：
– flex 項（愚人碼頭註：也稱 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 項
– 排列方向（direction），這決定了 flex 項的布局方向

1）創建一個 flex 容器

要創建一個 flex 容器，您只需要將一個 display: flex 屬性添加到一個元素上。默認情況下，所有的直接子元素都被認為是 flex 項，並從左到右依次排列在一行中。如果 flex 項的寬度總和大於容器，那麽 flex 項將按比例縮小，直到它們適應 flex 容器寬度。

2）將 flex 項排成一列

可以通過(在 flex 容器中)設置 flex-direction: column 使 flex 項垂直布局。也可以通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列。

Flexbox 布局