Flexbox 布局
阿新 • • 發佈:2017-12-03
rec 重新 收縮 方向 mozilla target .com earch red
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 布局