时间戳

首页 > 解决方案 > 防止 CSS Flex 在两个轴上拉伸

html - 防止 CSS Flex 在两个轴上拉伸

问题描述

有没有办法防止在 CSS Flex 的两个轴上拉伸？在下面的示例中，我希望选项和框层调整为子项的宽度和高度。此外，我希望该框位于页面中间。

我知道 flex-grow 和基础，但我的理解是它只管理主轴的空间。

.container {
  background-color: red;
  display: flex;
  justify-content: center;
}

.box {
  display: flex;
  flex-basis: 0;
  background-color: green;
  justify-content: center;
}

.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: yellow;
}

.img-container {
  background-color: blue;
}

.img-container img {
  max-width: 100%;
}
<div class="container">
    <div class="box">
        <label class="option">
            Option 1
            <div class="img-container">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
            </div>
        </label>
        <label class="option">
            Option 2
            <div class="img-container">
                <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
            </div>
        </label>
    </div>
</div>

标签： htmlcssflexbox

解决方案

推荐阅读