Html 将弹性容器设置为内容宽度

发布于01月30日

我认为这很简单，但我不能得到正确的.我得了.notes-container分.宽度应由.first-line的内容设置.而.second-line应该具有相同的宽度.不应设置.notes-container的宽度，而应将其调整为.first-line.问题是让.second-line调整到.first-line的宽度.

.notes-container {
  display: flex;
  flex-direction: column;
}

.first-line {
  display: flex;
  flex-direction: row;
}

.second-line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-grow: 1;
}

<div class="notes-container">

  <div class="first-line">
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
  </div>

  <div class="second-line">
    <div>content 5</div>
    <div>content 6</div>
    <div>content 7</div>
  </div>

</div>

你知道怎么解决这个问题吗？

推荐答案

在.notes-container中，从display: flex切换到display: inline-flex.

前者占用行中所有可用的空间.

后者根据内容的宽度进行调整.

.notes-container {
  display: inline-flex; /* adjusted */
  flex-direction: column;
}

.first-line {
  display: flex;
}

.second-line {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
}

<div class="notes-container">

  <div class="first-line">
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
  </div>

  <div class="second-line">
    <div>content 5</div>
    <div>content 6</div>
    <div>content 7</div>
  </div>

</div>