Flexbox 是一維布局方式，按行或按列。它解決了元素對齊、分布和響應(yīng)式的問題。

開啟 flex

開啟 flex 布局只需要給外層容器設(shè)置

它的直接子元素就會默認按行進行排列。

軸

在行模式下，有一條水平方向的主軸和一條垂直方向的交叉軸。子元素會從flexbox 容器左上角開始，從左到右依次排列，即主軸最左邊，交叉軸的最上邊。

改變主軸布局

改變主軸方向的布局使用justify-content屬性，例如：

靠右對齊

justify-content: flex-end;

居中對齊：

平分空間：

justify-content: space-evenly;

兩端對齊：

改變交叉軸布局

改變交叉軸方向的布局使用align-items屬性，例如：

靠下對齊：

align-items: flex-end;

居中對齊：

列模式

在列模式下，主軸變成了交叉軸、交叉軸變成了主軸，其他的設(shè)置項跟行模式一樣。

比例

非固定尺寸的子元素，可以通過設(shè)置 flex 屬性調(diào)整空間的占比。默認都是1，平分空間，如果把第二個元素設(shè)置成:

flex: 2

則會占據(jù)2/3的空間。

結(jié)束

好了，這就是今天的2分鐘掌握 CSS flexbox 布局，你學(xué)會了嗎，有問題歡迎在評論區(qū)留言，我是峰華，感謝觀看！