通過設(shè)定外部盒子為flex布局开伏，并設(shè)定flex規(guī)則，來實(shí)現(xiàn)對(duì)內(nèi)部元素排列的控制
flex相關(guān)的屬性有以下幾點(diǎn)
display: flex 必須屬性
flex-direction 決定flex的軸向
justify-content 主軸的對(duì)其方式
align-items 交錯(cuò)軸的對(duì)其方式
align-self 盒子內(nèi)某一元素的對(duì)其方式
flex-wrap 決定換行的屬性
order 排序
主軸和交錯(cuò)軸
flex容器內(nèi)存在相互垂直的兩條軸遭商，主軸和交錯(cuò)軸固灵，默認(rèn)情況下橫向的為主軸，縱向的為交錯(cuò)軸
image.png
默認(rèn)情況下排列從主軸開始依次向后面排列
對(duì)齊方式
先指定主軸和交錯(cuò)軸如下
image.png
justify-content 用來指定主軸的對(duì)其方式, 也可以理解為容器內(nèi)元素的間隔方法劫流。有以下取值
image.png
align-items用來指定交錯(cuò)軸的對(duì)其方式巫玻，有以下取值
image.png
align-self 是內(nèi)元素本身垂直主軸的對(duì)其方式，不會(huì)影響到其他元素
image.png
主軸和交錯(cuò)軸的確定
通過指定flex-direction的值可以指定主軸的方向以及起始位置
flex-direction有以下四個(gè)屬性
- row 默認(rèn)值 橫向 從左到右
- row-reverse 橫向 從右向左
- column 縱向 從上到下
- column-reverse 縱向 從下向上
例如指定flex-direction: column-reverse;后其主軸方向以及起始點(diǎn)會(huì)變成如下
image.png
