Flex布局

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 :每个子元素之间的间距以及子元素与容器边缘的间距完全相等。