首页 文章

弯曲增长使最后一行正确宽度[重复]

提问于
浏览 次
2

这个问题在这里已有答案：

所以我有一个包含一些盒子的弹性盒子 . 所有盒子占据宽度的三分之一 . 由于我使用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>
html css responsive-design flexbox flex-grow

3 回答

  • 3

    使用 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>
    回复于
  • 0

    从类 .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>
    回复于
  • 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;
}

    附：我知道你没有要求这个，但如果你想修复边框使它们不重叠，你也可以这样做：

    * {
  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;
}

    希望这可以帮助！

    回复于

相关问题