Question

我使用＆＃34;完整的设计＆＃34; Flexbox的。我有一个奇怪的问题：我有一个容器，它占用了所有剩余的空间，我希望在这个容器中，孩子（也是flexbox）的高度可以根据其内容进行调整。

问题在于：

＆＃13;

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;
  
}

＆＃13;

<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>

＆＃13;

正如您所看到的，图标占据了容器的整个高度：事实上，我不想指定高度，因为我不知道文本长度并且真的想要它，如果内容很大，图标占据了内容的高度（不想剪切文本）。此外，如果页面调整大小，我真的希望图标对齐（就像在智能手机上）。

另外，我不明白为什么图标占据其父级的高度而不是其内容，因为我没有指定＆＃34; flex：1＆＃34;在上面。我假设它适合内容大小的默认行为，但这似乎不起作用。

感谢您的帮助。

image of the issue

Answer 1

.icon是flex-column，默认情况下会.img延长，除非.icon有align-items。我没有将align-items应用于.icon的原因是因为其他嵌套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>

flexbox height调整为内容

1 个答案: