html - 如何包装 flex 盒子项，以便多个子项堆叠在另一个子项旁边？

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