灵活增长使最后一行的宽度正确

时间:2018-11-19 10:53:12

标签: html css responsive-design flexbox flex-grow

所以我有一个包含一些盒子的弹性盒子。所有盒子占宽度的三分之一。由于我使用了flex-grow,所以我的最后一个元素将不会停留在其列的大小上。我知道为什么会这样,但是我不想使用max-width,因为指定的宽度通常不太好。任何建议都将适用!

这是当前正在发生的事情: enter image description here

我想发生的事情: enter image description here

CODEPEN HERE-https://codepen.io/matt-priestley/pen/ZmXqzr

<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

3 个答案:

答案 0 :(得分:4)

从类 .boxes

中删除flex-grow: 3;

这是更新的代码段:

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  /*flex-grow: 3;*/
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}
<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>

答案 1 :(得分:0)

我继续进行操作,并将flex-grow更改为auto,如下所示,它似乎工作正常。或者,您也可以将其完全删除,因为在这种情况下没有必要。

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-grow: auto;
  flex-basis: 33.3%;
  border: 2px solid black;
  box-sizing: border-box;
  min-width: 200px;
}

P.S。我知道您并没有要求这样做,但是如果您想固定边框以免边框重叠,也可以这样做:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.boxes {
  background-color: red;
  list-style-type: none;
  height: 200px;
  flex-basis: 33.3%;
  min-width: 200px;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
}

.boxes:nth-of-type(3n+1) {
  border-left: 2px solid black;
}

.boxes:nth-of-type(-n+3) {
  border-top: 2px solid black;
}

希望这会有所帮助!

答案 2 :(得分:0)

使用flex-wrap:wrap并将每个框的宽度设置为33%-(margin_size)

.container{
  display: flex;
  flex-wrap: wrap;
}

.boxes{
  width: calc(33% - 20px);
  height: 180px;
  background-color: #3C79D1;
  border: 2px solid #003C92;
  margin: 10px;
  box-sizing: border-box;
}

li{
  list-style-type: none;
}
<ul class="container">
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
  <li class="boxes"></li>
</ul>