计算正确的排水沟

Question

我想要几个具有不同默认大小的块。当我使用justify-content: space-between;时，我不能（并且不想）使用固定值设置2个元素之间的空间，我也不想为我的项目设置空间。但是当我有49％的大元素宽度和24.5％的小元素时，我会遇到麻烦（请看图片）：

这是我使用的代码：

.container{
    margin:8vh 0;
    display: flex;
    width:100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.media_child{
    background:cyan;
    width:49%;
    margin-top:15px;
}

.media_child_small{
    background:tomato;
    width:24.5%;
    margin-top:15px;
}

如何在这样的场景中正确计算宽度？如果我有更多不同的宽度尺寸（25％，33％，50％和75％），我该怎么做呢？

Answer 1

您可以设置flex值以展开子项，然后为min-width设置max-width和width ，不用固定值所以浏览器会自己进行计算，以便最好地适应每个元素。

最好是给你一个测试和玩法的例子：

body {
  counter-reset:divs;
  display:flex;
  flex-wrap:wrap;
}
div {
  counter-increment:divs;
  padding:5px;
  border:solid;
  margin:5px;
  flex:1;
  box-sizing:border-box;
  
}
div:before {
  content:'div N°'counter(divs)' class='attr(class);
}
.quart {
  min-width:23%;
  max-width:25%;
}
.quartx3 {
  min-width:74%;
  max-width:75%;
}
.third {
  min-width:30%;
  max-width:33.33%;
}
.thirdx2 {
  min-width:60%;
  max-width:66.66%;
}

<div class="quart"></div>
<div class="quart"></div>
<div class="quart"></div>
<div class="quart"></div>
<div class="third"></div>
<div class="thirdx2"></div>
<div class="quartx3"></div>
<div class="quart"></div>

使用和https://codepen.io/gc-nomade/pen/wjPjmM

进行分享