Flexbox（Flexible Box Layout）是CSS3中的一种新的布局模式，也是目前最常用的布局方式之一。它可以让我们更轻松地创建响应式设计，使页面在不同屏幕尺寸和设备上显示的效果更好。下面是对Flexbox的详细解释。
Flexbox主要有两种角色：容器和项目。容器是一个DOM元素，它包含项目，而项目是直接放在容器内的子元素。我们通过设置容器的属性来控制项目的布局。
以下是Flexbox的一些主要属性：
容器属性
-
display: flex;定义一个容器为Flex容器。 -
flex-direction: row | row-reverse | column | column-reverse;定义Flex容器内的主轴方向，row表示水平方向，column表示垂直方向。row-reverse和column-reverse分别表示主轴方向相反的情况。 -
flex-wrap: nowrap | wrap | wrap-reverse;定义Flex容器内的项目是否换行。nowrap表示不换行，wrap表示换行，wrap-reverse表示换行且倒序排列。 -
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;定义Flex容器内的项目在主轴上的对齐方式。flex-start表示在主轴的起点对齐，flex-end表示在主轴的终点对齐，center表示在主轴的中间对齐，space-between表示两端对齐，项目之间的间隔相等，space-around表示项目两侧的间隔相等，项目之间的间隔是相邻项目间距的一半，space-evenly表示每个项目周围的间隔相等。 -
align-items: flex-start | flex-end | center | baseline | stretch;定义Flex容器内的项目在交叉轴上的对齐方式。flex-start表示在交叉轴的起点对齐，flex-end表示在交叉轴的终点对齐，center表示在交叉轴的中间对齐，baseline表示在项目的基线上对齐，stretch表示在交叉轴上拉伸，填满容器的高度。 -
align-content: flex-start | flex-end | center | space-between | space-around | stretch;定义多行项目在交叉轴上的对齐方式，只有在有多行项目时才生效。flex-start表示在交叉轴的起点对齐，flex-end表示在交叉轴的终点对齐，center表示在交叉轴的中间对齐，space-between表示两端对齐，项目之间的间隔相等，space-around表示项目两侧的间隔相等，项目之间的间隔是相邻项目间距的一半，stretch表示在交