Flexbox高度自适应内容

Question

Flexbox高度自适应内容

9

我将使用“全设计”弹性盒子。我遇到了一个奇怪的问题：我有一个占据所有剩余空间的容器，我希望在这个容器中，子元素（也是弹性盒子）的高度能够根据内容自适应。

以下是问题描述：

body, html {
  width:100%;
  height:100%;
  display:flex;
}

.container {
  display:flex;
  flex:1;
  flex-wrap:wrap;
}

.icon {
  width:10vh;
  margin:10px;
  display:flex;
  flex-direction:column;
}
.img {
  width:10vh;
  height:10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:red;
}

.text {
  text-align:center;
  
}

<div class="container">
<div class="icon">
<div class="img">
</div>
<div class="text">
action 1
</div>
</div>
<div class="icon">
<div class="img">
</div>
<div class="text">
Action 2
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 3
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 4
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 5
</div>
</div>

</div>

正如您所看到的，图标占据了容器的全部高度:实际上，我不想指定高度，因为我不知道文本长度，如果内容很多，我真的希望图标占据其内容的高度(不想裁剪文本)。此外，如果页面被调整大小，我真的希望图标能够对齐(就像在智能手机上一样)。

另外，我不明白为什么图标占据了其父元素的高度而不是其内容，因为我没有在它上面指定"flex:1"。我假设默认行为是适合内容大小，但这似乎并没有起作用。问题的图片

- Adavo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Accepted Answer

.icon 是 flex-column，这使得默认情况下 .img 会被拉伸，除非 .icon 拥有 align-items。我没有在 .icon 使用 align-items 的原因是其他嵌套的 flex-containers/flex-items 开始折叠。于是我选择向上调整 .container 而不是沿着层级向下调整。

相关的 CSS：

.container {
  display: flex;
  flex: 1;         /* If you remove this .container will shrink to wrap around .icon's */
  flex-wrap: wrap;
  justify-content: center;  /* This centers .icon's along a horizontal axis. */
  align-items: baseline;    /* This aligns .icon's along a common baseline vertically. */
  outline: 3px dashed blue; /* To show the size of .container */
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red; /* To show the size of .icon */
}

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
}
.container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: flex-start;
  outline: 3px dashed blue;
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red;
}
.img {
  width: 10vh;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.text {
  text-align: center;
}

<div class="container">
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 1
    </div>
  </div>
  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 2
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 3
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 4
    </div>
  </div>

  <div class="icon">
    <div class="img">
    </div>
    <div class="text">
      Action 5
    </div>
  </div>

</div>