Question

我使用flexbox有一个类似于表格的布局：

+--------------+---------------+-----------------+---------------+
|      1       |       2       |        3        |       4       |
|              |               |                 |               |
+--------------+---------------+-----------------+---------------+

随着页面变小，我想将内容包装成最终结果：

+--------------+-------------------------------------------------+
|              |                        2                        |
|              |                                                 |
|              +-------------------------------------------------+
|      1       |                        3                        |
|              |                                                 |
|              +-------------------------------------------------+
|              |                        4                        |
|              |                                                 |
+--------------+-------------------------------------------------+

我尝试使用flex-wrap: wrap并扩展尾随子项的宽度以强制它们换行，但这只会产生类似的内容：

+-----------+--------------------------------------+
|           |                   2                  |
|           |                                      |
|     1     +--------------------------------------+
|           |
|           |
+-----------+--------------------------------------+
|                        3                         |
|                                                  |
+--------------------------------------------------+
|                        4                         |
|                                                  |
+--------------------------------------------------+

这是我目前的尝试：

.container {
  display: flex;
  flex-wrap: wrap;
}

.controls {
  flex: 0 0 25%;
  max-width: 25%;  
}

.name, .artist, .album {
  flex: 0 0 75%;
  max-width: 75%;
}

@media screen and (min-width: 600px) {  
  .name, .artist, .album {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

<div class="container">
  <div class="controls">PLAY</div>
  <div class="name">NAME</div>
  <div class="artist">ARTIST</div>
  <div class="album">ALBUM</div>
</div>

（JSFiddle）

我更喜欢在IE11 +中使用的纯CSS解决方案。

Answer 1

考虑使用嵌套的Flex容器，将第2,3和4项切换到较小屏幕上的列。

以下是基于您的代码的示例：

<强> HTML

<div class="container">
    <div class="controls">PLAY</div>
    <div class="inner-container"><!-- nested flex container -->
        <div class="name">NAME</div>
        <div class="artist">ARTIST</div>
        <div class="album">ALBUM</div>
    </div>
</div>

<强> CSS

.container {
    display: flex;
    flex-wrap: wrap;
}

.inner-container {
    display: flex;
    flex: 0 0 75%;
}

.controls {
    flex: 0 0 25%;
}

.name,
.artist,
.album {
    flex: 1;
}

@media screen and (max-width: 600px) {
     .inner-container { flex-direction: column; }
     .controls { align-self: center; }
}

Revised Fiddle

如何包装flexbox子项，以便多个孩子堆叠在另一个孩子旁边？

1 个答案: