用保鲜膜去除柔性接线盒中的剩余空间

Question

如何使用wrap选项减小flexbox容器的宽度，使其仅占用其项所占用的宽度？

目标是不在黄色方框右侧看到任何绿色(方框项目上设置的边距除外(

注：带换行符的flexbox每行可以接受2个以上的项目，这与窗口的大小有关。

main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px; /* This width changes with the window's size */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: flex-start;
}
.list .box {
width: 300px; /* This will never change */
height: 300px;
margin: 0 32px 32px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}

<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>

链接到Codepen

Answer 1

我想向您展示一个使用css网格并使用属性minmax的替代方案。我相信这会更接近你想要的。

它将为每个盒子提供至少300像素的宽度，并将容纳尽可能多的盒子。如果留有空间，那么除非另一个盒子可以容纳，否则盒子的大小会增加以容纳空间。

要做到这一点，我们必须添加：grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );

该css行将添加列的数量。重复是指根据以下规则重复添加列：

• 自动调整：它必须在不留下空白的情况下调整屏幕宽度。它将调整1fr的大小以使其成为可能
• minmax(300px，1fr(意味着每个分数都需要至少为300px。如果屏幕较大，则将再次应用第一条规则，并相应地调整1fr的大小

body {
margin: 0;
padding: 0;
width: 900px;
}
h1 {
background-color: red;
height: auto;
margin: 0;
}
.list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr) );
grid-auto-rows: auto;
grid-gap: 32px;
background-color: green;
}
.box {
min-height: 300px;
background-color: yellow;
}

<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>

Answer 2

给出的答案是正确的，

你可以尝试另一种选择。

* {
box-sizing: border-box;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
background-color: green;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.list .box-wrapper {
width: 300px;
height: 300px;
display: flex;
}
.list .box {
width: 100%;
margin: 0 16px 16px 0;
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}

<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
<div class="box-wrapper">
<div class="box">
box
</div>
</div>
</div>
</main>

Answer 3

我刚刚注释掉了.box和.list上的边距，并在justify-content属性上用space-between替换flex-start，然后添加了两行较小的行来很好地格式化它，即column-gap和row-gap，以扩大它们之间的空间

示例

main {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 900px;
/* emulate high width */
background-color: red;
}
.list {
display: flex;
flex-wrap: wrap;
background-color: green;
justify-content: space-between;
column-gap: 1px;
row-gap: 25px;
}
.list .box {
width: 300px;
height: 300px;
/*margin: 0 150px 32px 0;*/
display: flex;
align-items: center;
justify-content: center;
background-color: yellow;
}

<main>
<h1>Titre ici</h1>
<div class="list">
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
</div>
</main>