Flex弹性容器的使用

使用了display: flex的元素，其子元素，无论块级元素还是行内元素，均变为行内块元素

1. flex-direction

修改元素的排列方向

1.1 row

横向排列，从左侧开始排列

1.2 row-reverse

横向排列，从右侧开始排列

1.3 column

纵向排列，从顶部开始排列

1.4 column-reverse

纵向排列，从底部开始排列

2. flex-wrap

当一行元素不能容下时，是否换行

2.1 nowrap

超出不换行，压缩子元素的大小

2.2 wrap

超出的元素换行

3 justify-content

在主轴方向水平对齐

3.1 flex-start

左对齐

3.2 flex-end

右对齐

3.3 center

居中

3.4 space-around

均分空间

3.5 space-between

两端对齐

4. align-items

副轴方向对齐

4.1 stretch

默认状态，因此若未指定大小的元素，初始时副轴方向会拉伸

4.2 flex-start

上对齐，不会在副轴方向拉伸

4.3 flex-end

下对齐

4.4 center

居中

5. align-content

类似于justify-content，只针对于多行元素在副轴上有效