Flex布局

容器属性
(1) display: flex
将一个元素设置为 Flex 容器。
默认情况下，子元素会水平排列。

(2) flex-direction
定义主轴的方向（即子元素的排列方向）。
可选值：
row ：默认,子元素沿水平方向从左到右排列。
column :子元素沿垂直方向从上到下排列。
row-reverse :子元素沿水平方向从右到左排列。
column-reverse :子元素沿垂直方向从下到上排列。

(3) justify-content
定义主轴上的对齐方式。
可选值：
flex-start :默认, 起点对齐
flex-end :子元素向主轴的终点对齐。
center :子元素在主轴上居中对齐。
space-between :子元素之间的间距相等，首尾子元素分别贴紧主轴的起点和终点。
space-around :每个子元素周围的间距相等。
space-evenly :每个子元素之间的间距以及子元素与容器边缘的间距完全相等。

(4) align-items
定义交叉轴上的对齐方式。
可选值：
stretch ：默认，子元素在交叉轴方向上拉伸以填满容器。
flex-start ：子元素在交叉轴的起点对齐。
flex-end ：子元素在交叉轴的终点对齐。
center ：子元素在交叉轴上居中对齐。
baseline ：子元素在交叉轴上按基线对齐。

(5) flex-wrap
定义子元素是否换行。
可选值： nowrap （默认）、wrap 、wrap-reverse

(6) gap
控制子项之间的间距
gap: 行间距 列间距;
单个值：同时设置行间距和列间距
两个值：第一个值设置行间距，第二个值设置列间距

注意以上均为容器属性，不是子项属性！！！注意区分两者关系!!!!