使用 flexbox 均勻間隔元素

Question

我目前正在做一個項目，我必須使用 flexbox 在一年中創建四個季度。 我希望所有季度與第 2 季度和第 3 季度以上的年份均勻分布。我知道我必須使用 justify-content: space-evenly，但問題是第 2 季度和第 3 季度彼此太接近因為它們與年份一起在一個容器中。 我將把 HTML 和 CSS 留在這里，以防你想在 js fiddle 中看到它。

HTML

<div class="container">
  <div>Q1</div>
    <div>
      <div class="yearContainer">2022</div>
        <div class="q2q3Container">
          <div>Q2</div>
          <div>Q3</div>
        </div>
    </div>
  <div>Q4</div>
</div>

CSS

.container {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
}

.yearContainer {
  display: flex;
  justify-content: center;
}

.q2q3Container {
  display: flex;
}

我的問題是我不知道如何分隔 q2 和 q3，因此它們與 q1 和 q4 具有相同的空間。 我將留下關於我如何將其成像的圖片，這也是該視圖的實際應用。 在此處輸入圖像描述。

謝謝你的幫助。

Answer 1

我會為那個設計使用grid 。 但是如果你想使用flex ，你可以使用flex-basis來定義
25%的面積| 50% | 25% 的空間。 然后你可以使用justify-content: space-around; 在Q2、Q3要均勻分布內容。 我還在主容器中使用了text-align: center 。

 .container { display: flex; align-items: flex-end; text-align: center; }.yearContainer { flex-basis: 50%; display: flex; justify-content: center; }.q2q3Container { display: flex; justify-content: space-around; }.fb-25 { flex-basis: 25%; }.fb-50 { flex-basis: 50%; }

 <div class="container text-center"> <div class="fb-25">Q1</div> <div class="fb-50"> <div class="yearContainer">2022</div> <div class="q2q3Container"> <div>Q2</div> <div>Q3</div> </div> </div> <div class="fb-25">Q4</div> </div>