今晚只谈Flex

>>>何为Flex

1. 块级元素侧重于垂直方向、行内元素侧重于水平方向。然而Flex与方向无关。
2. flex布局可以实现空间自动分配、自动对齐。
3. flex适用于简单的线性布局，更复杂的要交给grid布局

>>>flex item、flex container、主轴、侧轴、主尺寸、侧尺寸、起点终点

>>>flex container的六个属性 ---> 在父元素｛display:flex;｝

1. flex-direction(方向)

默认row(一行一行的展示从左往右) row-reverse（从右往左,宽度不够了也会挤在这里）
column(从上往下) row-reverse(从下往上,高度不够了也会挤在这里)

2. flex-wrap:wrap----------------可以换行了

3. flex-flow: row wrap(以上两种的缩写)

4. justify-content : 主轴对齐方式

space-between
space-around
flex-start
flex-end
center

5.align-items: 侧轴上的对齐方式（还是记图形不叫方便）

flex-end
flex-start
center
base-line

6. align-content:(不常用)

space-between
space-around
flex-start
flex-end
center
我怎么有种回到高中背英语单词的感觉！！！！！

>>>justify-items的六个属性

1. flex-grow(成长) 分配多余的空间

2.flex-shrink(收缩比例)一般不用

3.flex-basis(原始大小。但可以设置)一般不用

4.flex以上三种的缩写

5.order：123 改变顺序

6.align-self:孩子自己的对齐方式

flex-start
flex-end
center

阮一峰flex教程

学完了做两个小例子

手机端布局