flex元素在交叉轴的分布方式
align-content，适合多行
- stretch（默认值）如果弹性元素未设置高度或设为auto，将flex元素拉长
- flex-start（默认值）：在交叉轴的开始
- flex-end：在交叉轴的结尾
- center： 在交叉轴的中间
- space-between：两端分布
- space-around：每个flex元素两侧的间隔相等
- space-evenly：均匀分布，每个元素之间的间隔相等
flex元素的属性：
flex-grow 当flex容器有剩余空间时，flex元素是否放大
- 默认值：0，即不占据剩余空间
- 值为1时，占据所有剩余空间
flex-shrink 当容器空间不足时，flex元素是否被压缩
- 默认值：1，表示：如果容器空间不足，flex元素将等比例缩小。
- 如果值为 0，表示：如果容器空间不足，flex元素将不缩小
flex-basis
- 设置flex元素的高度，默认值为auto
- flex-basis优先级比width要高
flex元素属性可简写为：
flex: flex-grow flex-shrink flex-basis ；
练习：
需求：使用flex来完成布局
