Question

在弹性项目上设置flex: 1 1 0不能正常工作，因为弹性项目可以包含不同大小的图像。

在下面的示例中，包含图像的弹性项目变得比其他弹性项目宽。

HTML

<div class="flex-container">
  <div class="flex-item">
    <p>Hi</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/1/11/Episkopi_01-2017_img11_Kourion.jpg">
  </div>
  <div class="flex-item">
    <p>there</p>
  </div>
  <div class="flex-item">
    <p>dear</p>
  </div>
  <div class="flex-item">
    <p>reader</p>
  </div>
</div>

CSS

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

.flex-item {
  flex: 1 1 0;
}

.flex-item:nth-child(odd) {
  background-color: blue;
}

.flex-item:nth-child(even) {
  background-color: yellow;
}

https://jsfiddle.net/gzLwn7cu/

我可以尝试使用width而不是flex属性。然后，弹性项目会获得正确的宽度，但是图像会溢出。

.flex-item {
  width: 25%;
}

https://jsfiddle.net/gzLwn7cu/1/

直到我在图像本身上添加属性后，我才能够解决问题。

img {
  width: 100%;
  height: auto;
}

https://jsfiddle.net/gzLwn7cu/1/

但是，我想在不知道其中可能包含什么的情况下，将子元素强制包含在大小相等的弹性项目中（沿着主轴）。

是否可以设置某种flex属性来实现这一目标？

Answer 1

Flex-bases将是您的答案。 flex-basis: 50%;。 Flex基础为计算flex: 1 1 0的起点添加了起点在这里https://jsfiddle.net/8ex91kn0/

图像上的宽度，因为默认情况下图像将是其自身的完整宽度。为了将其调整为包含框的尺寸，我们需要width: 100%;

当物品可能包含不同尺寸的图像时，如何制作尺寸相同的柔性物品？

1 个答案: