display: flex;的布局

display: flex; 是CSS3中引入的一种布局方式，它可以让我们更加轻松地实现灵活的布局，特别是在响应式设计方面非常有用。使用 flex 布局可以将一个容器元素中的子元素按照一定规则进行排列，同时还可以设置子元素在父容器中的对齐方式、排序方式等。

flex 布局最重要的是要理解容器和子元素两个概念，容器指的是设置了 display: flex; 的元素，而子元素指的是容器元素的直接子元素。容器有很多属性可以设置，如 flex-direction、justify-content、align-items、align-content 等等，这些属性都可以控制子元素的排列方式。

以下是一些常用的属性：

1. flex-direction：决定主轴方向，可以取值 row、row-reverse、column、column-reverse。
2. justify-content：决定子元素在主轴上的对齐方式，可以取值 flex-start、flex-end、center、space-between、space-around。
3. align-items：决定子元素在交叉轴上的对齐方式，可以取值 flex-start、flex-end、center、baseline、stretch。
4. align-content：决定多行子元素在交叉轴上的对齐方式，可以取值 flex-start、flex-end、center、space-between、space-around、stretch。