缩小页面宽度时，Flex box max-width 不起作用答案

【问题标题】：缩小页面宽度时，Flex box max-width 不起作用
【发布时间】：2022-01-23 16:33:44
【问题描述】：

我正在制作一个应用了最大和最小宽度的弹性框。但是当我减小页面大小时不起作用。它显示空白区域。如何解决？

.parent{
  border: 1px solid red;
  width: 50%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;  
}

.parent div {
  background-color: yellow;
  width: 50%;
  min-width: 150px;;
  max-width: 100%;
}

.parent div:last-child{
  background-color: red;
  margin:0 auto;
}

 <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

当最小尺寸小于预期时，它不会移动到 100%。但显示空白空间

【问题讨论】：

标签： html css flexbox

【解决方案1】：

因为max-width 不等于宽度。

你必须告诉元素尽可能地扩大到它的最大宽度，在这种情况下是flex:1

.parent{
  border: 1px solid red;
  width: 50%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;  
}

.parent div {
  background-color: yellow;
  width: 50%;
  min-width: 150px;;
  max-width: 100%;
 flex:1;
}

.parent div:last-child{
  background-color: red;
  margin:0 auto;
}

 <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

【讨论】：

【解决方案2】：

您可以通过将最后一个元素的宽度设置为向下 100% 来解决此问题：

.parent{
  border: 1px solid red;
  width: 50%;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;  
}

.parent div {
  background-color: yellow;
  width: 50%;
  min-width: 150px;;
  max-width: 100%;
}

.parent div:last-child{
  background-color: red;
  width: 100%;
  margin:0 auto;
}

 <div class="parent">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>

【讨论】：