弹性布局 FlexBox

适合一维非常简单的布局，使用该布局就不必再猜每个元素的margin，padding等等数字。 开发FlexBox的想法是让浏览器自动规划子元素之间的空白空间，也让元素之间的对齐变得很简单。

在使用时，我们需要在元素外创建一个Flex容器，并设置其display属性为flex，此时该容器内的所有子元素都被视为 Flex items。

这些元素的布局方向称为主轴main axis，还有一个横轴 cross axis。

对于 Flex 容器：

• Flex容器间距 gap
• Flex容器主轴对齐 justify-content
• FLex容器副轴对齐 align-items
• Flex容器主轴方向 flex=direction

对于 Flex 元素：

• Flex元素对齐设置 align-self
• Flex元素扩大 flex-grow
• Flex元素缩小 flex-shrink
• Flex元素宽度 flex-basis
• Flex元素属性 flex
• Flex元素顺序 order