一. 軸的概念
設(shè)有display:flex或者display:block的元素就是一個flex container(伸縮容器)萎战，里面的子元素稱為flex item(伸縮項目)胁澳，flex container中子元素都是使用Flex布局排版惰瓜。
主軸和側(cè)軸
容器默認(rèn)有兩個軸：主軸(main axis)和側(cè)軸(cross axis)跷敬。
- 主軸的開始位置為主軸起點(main start)撕阎，主軸的結(jié)束位置為主軸終點(main end),而主軸的長度為主軸長度(main size)。
- 側(cè)軸的起點為側(cè)軸起點(cross start),結(jié)束位置為側(cè)軸終點(cross end),長度為側(cè)軸長度(cross size)斗这。
一. 定義主軸
主軸并不是一定是從左到右的动猬，同理側(cè)軸也不一定是從上到下，主軸的方向使用flex-direction屬性控制,它有4個可選值:
- row :從左到右的水平方向為主軸
- row-reverse：從右到左的水平方向為主軸
- column:從上到下的垂直方向為主軸
- column-reverse從下到上的垂直方向為主軸
如果水平方向為主軸表箭，那個垂直方向就是側(cè)軸赁咙，反之亦然。
軸方向
二. 子元素的對齊方式
1. justify-conent 根據(jù)主軸對齊
- flex-start 主軸起點對齊(默認(rèn)值)
- flex-end 主軸結(jié)束點對齊
- center 在主軸中居中對齊
- space-between 兩端對齊免钻，除了兩端的子元素分別靠向兩端的容器之外彼水，其他子元素之間的間隔都相等
- space-around 每個子元素之間的距離相等，兩端的子元素距離容器的距離也和其它子元素之間的距離相同极舔。
justify-content主軸對齊
2. align-items 根據(jù)側(cè)軸對齊
- stretch 填充整個容器(默認(rèn)值)
- flex-start 側(cè)軸的起點對齊
- flex-end 側(cè)軸的終點對齊
- center 在側(cè)軸中居中對齊
- baseline 以子元素的第一行文字對齊
align-items側(cè)軸對齊
