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

Question

我认为这很简单，但我无法理解。我有一个

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

知道如何解决这个问题吗？

Answer 1

如果我正确理解您的要求，您可以使用 flex-wrap 解决问题

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

.first-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: no-wrap;
}

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

Answer 2

在

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