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 項以相反的順序排列。

轉載于:https://www.cnblogs.com/yeguijiang/p/7966120.html

總結

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

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