如何限制css flex的水平拉伸

Question

我的div有3个孩子div。我正在使用CSS flex来动态设置div的高度。有3个div它工作正常。

但可能有一个情况我将有2个孩子div。这里，子div正在拉伸并占据页面的整个宽度。如何仅使用CSS限制此拉伸。通过删除div 3来检查其行为。

html, body {
    height: 100%;
}

body {
    margin: 0;
}

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

.flex-item {
    flex: 1;
    display: inline-block;
    background: yellow;
    margin: 10px;
    height: 100px;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">DIV 1</div>
        <div class="flex-item">DIV 2</div>
        <div class="flex-item">DIV 3</div>
    </div>
</div>

2个孩子div像这样拉伸

Answer 1

使用flex-basis可能是一个选项

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.flex-container .row {
  display: flex;
}
.flex-item {
  flex-basis: calc(33.33% - 20px);
  background: yellow;
  margin: 10px;
  height: 100px;
}

<div class="flex-container">
  <div class="row">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
</div>

<div class="flex-container">
  <div class="row">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
  </div>
</div>

另一种选择是将flex-grow设置为小于1

的数字

因此，要获得与flex-basis相同的结果，您需要将flex-shrink设置为0并在弹性项目中添加一个额外的元素来处理边距。

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
.flex-container .row {
  display: flex;
}
.flex-item {
  flex: 0.333 0;
} 
.flex-item div {
  background: yellow;
  margin: 10px;
  height: 100px;
}

<div class="flex-container">
  <div class="row">
    <div class="flex-item"><div>1</div></div>
    <div class="flex-item"><div>2</div></div>
    <div class="flex-item"><div>3</div></div>
  </div>
</div>

<div class="flex-container">
  <div class="row">
    <div class="flex-item"><div>1</div></div>
    <div class="flex-item"><div>2</div></div>
  </div>
</div>