具有不同宽度比(浮动、弯曲、网格)的柱的响应包装

Question

有没有办法指定列宽比和最小宽度，以允许窄屏幕包装(响应式设计(？

+-----+-----+-----+
| 1/3 |    2/3    |
|     |(1/3 | 1/3)|
+-----+-----+-----+
+-----+-----+
| 1/3 | 1/3 |       (actual ratio now 1/2)
|     | 1/3 |
+-----+-----+
+-----+
| 1/3 |             (actual ratio now 1 - full width)
+-----+
| 1/3 |
| 1/3 |
+-----+

每个1/3都是一个div，2/3也是
它应该填充其父级宽度的100%(居中的"main"容器列(。

我试过以下几种：

• "经典的"；float：做得不对
• flexbox：紧密，但尺寸不均匀
• 网格：尺寸合适，但不能包裹

div {
box-sizing: border-box;
border: 1px solid red;
margin: 1px;
padding: 0;
}
#container>div {
float: left;
}
#container::after {
content: "";
display: block;
clear: both;
}
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.flex>div {
flex-basis: 200px;
flex-shrink: 0;
}
.fone {
flex-grow: 1;
}
.ftwo {
flex-grow: 2;
}
.gthree {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 1rem;
}
.gtwo {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1rem;
}

float: not quite right
<div id="container">
<div style="width:33%;">A</div>
<div style="width:66%;">
<div style="width:50%;">B</div>
<div style="width:50%;">C</div>
</div>
</div>
flex: wraps, uneven sizing, children overflow
<div class="flex">
<div class="fone">A</div>
<div class="ftwo flex">
<div>B</div>
<div>C</div>
</div>
</div>
grid: nice sizing, but does not wrap
<div class="gthree">
<div>A</div>
<div class="gtwo">
<div>B</div>
<div>C</div>
</div>
</div>
Intended result:
<div class="one">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>

• 哪种方法适合我的目的
• 它将如何实施

Answer 1

不完美，但您可以非常接近网格和auto-fit(1(和CCD_ 4。

我们将最小-最大值中的最小值设置为它将包裹的宽度，并将最大值设置为1fr，以使单元随网格弯曲。

问题是repeat()和auto-fit在所有列之间设置了相等的比率，因此A将与B&C，直到所有东西都包在一起。这对于场景2和3来说是可以的，但对于场景1来说不是。

这可以通过使用flex和相应地设置flex grow来解决，这样当所有东西都在一行时，比率是正确的，但在其他情况下，比率必须再次更改，这是一个问题。

div {
box-sizing: border-box;
border: 1px solid red;
margin: 1px;
padding: 0;
}
#container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.inner { 
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

<div id="container">
<div class='single'>A</div>
<div class='inner'>
<div>B</div>
<div>C</div>
</div>
</div>

Answer 2

试试这个：

div {
box-sizing: border-box;
border: 1px solid red;
margin: 1px;
padding: 0;
}
.container {
display: flex;
flex-wrap:wrap;
justify-content:space-evenly;
/* Or you can use any of the 
following as per needs:
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;
justify-content:center; */
}
.inner { 
display: flex;
flex-wrap:wrap;
flex:1;
}
.middle { 
display: flex;
flex-wrap:wrap;
flex:1;
}
.single{
/* For occupying equal space: */
flex:1;

}

/* `Note: The flex-wrap works when you use a specific width, else the width will adjust automatically depends on screen size` */

<div class="container">
<div class='single'>A</div>
<div class='middle'>
<div class='inner'>B</div>
<div class='inner'>C</div>
</div>
</div>

Answer 3

Flex比例在我的应用程序中运行良好。实际内容具有(不同的(宽度，因此它们可能会在不同的屏幕宽度下收缩和溢出。我添加了flex的最小大小值，试图模拟它。它在Snippet中不太好用。

<div style="display:flex; flex-wrap: wrap; gap:1rem;">
<div style="flex:1 250px;">AAA unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</div>
<div style="flex:2; display:flex; flex-wrap: wrap; gap:1rem;">
<div style="flex:1 250px;">BBB unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</div>
<div style="flex:1 250px;">CCC unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</div>
</div>
</div>