样式化HTML元素以填充最小宽度

Question

我希望html元素的宽度介于150px和200px之间，它们填充100％的父宽度。

图片1：

图像2（调整窗口大小后）：

图3 :(再调整一下）：

图4 :(甚至更多）：

我尝试了flexbox但是项目没有填充100％的宽度：

（请全屏查看sinppet）

＆＃13;

＆＃13;

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}

＆＃13;

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

最重要的变化是允许flex-grow和flex-shrink结合最小和最大宽度。现在它们都在150到200px之间。最后一行不填充父级，这对于这些宽度是不可能的。除此之外，我删除了display:flex关于子元素 - 因为他们没有孩子，这是没有用的。我还添加了box-sizing: border-box;以将边框包含在最大200px中：

.flex {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  background:#ff0000;
}

.flexitem {
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
  margin: 5px;
  min-width:150px;
  max-width:200px;
  background:#000000;
  border:1px solid #ffffff;   
}

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  
</div>

Answer 2

您需要添加到代码中的所有内容为flex: 1 1 150px，所有flexitem的内容均介于150px和200px之间。

请注意，如果每个flexitem介于150px和200px之间，则显然无法将最后一行填充为100％父宽度。

为什么会这样？：

1. 弹性缩写flex: 1 1 150px表示：

   一个。设置为1

   允许flex-grow

   湾设置为1

   允许flex-shrink

   ℃。 flex-basis设置为必需的min-width

2. flex设置以及min-width和max-width会使flexitem介于150px和200px之间。

   尽管如此：在极少数情况下会出现一些不一致的行为，尤其是在使用min和max值以及flex时，请参阅this。

3. 还在border-box中添加了（解释here）并删除了body页边距以完成此操作。

谢谢！

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  flex: 1 1 150px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
</div>