display: flex两行布局

`display: flex` 是 CSS3 中的一种弹性盒模型布局方式，可以轻松创建两行布局。当应用于容器元素上，它会使内容在其内部水平方向上自动伸缩，并排列成一行或几行，取决于可用空间和设置的 flex 属性。

以下是创建两行基本布局的步骤：

1. **选择容器**：首先需要将 `display: flex` 或 `display: -webkit-flex` 设置给想要成为弹性布局的父元素。

.container {
   display: flex;
}

2. **指定方向**：如果你想让内容按垂直方向（从上到下）排列，添加 `flex-direction: column;`，如果是水平方向则默认即可，无此属性。

3. **控制行数**：通过调整容器的 `flex-wrap` 属性，你可以使其换行。设置为 `nowrap` （默认值）会让内容单行显示，设置为 `wrap` 或 `wrap-reverse` 可以让内容换行。

.container {
   display: flex;
   flex-wrap: wrap; /* 换行 */
}

4. **对齐和分布**：可以使用 `align-items` 和 `justify-content` 控制每一行内的项目如何对齐以及整个布局的项目间距。

例如，如果你希望两行内容都居中对齐，可以这样设置：

.container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
}