gpt4 book ai didi

html - 我怎样才能包装 flexbox child ,以便多个 child 堆叠在另一个 child 旁边?

转载 作者:行者123 更新时间:2023-11-27 23:32:17 27 4
gpt4 key购买 nike

我有一个使用 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 解决方案。

最佳答案

考虑使用嵌套的 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

关于html - 我怎样才能包装 flexbox child ,以便多个 child 堆叠在另一个 child 旁边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35227874/

27 4 0