我知道類似的問題經常被討論，但我找不到當前問題的答案:

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}

<div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <button>Button that should be right aligned</button>
</div>

您可以在按鈕周圍添加一個包裝，然后使用偽元素填充左列:

<div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <div class="button-wrapper">
    <button>Button that should be right aligned</button>
  </div>
</div>

.below-content::before {
  content: '';
  flex: 1;
}

.button-wrapper {
  display: flex;
  flex: 1;
  justify-content: end;
}

試試看:

.below-content::before {
  content: '';
  flex: 1;
}

.button-wrapper {
  display: flex;
  flex: 1;
  justify-content: end;
}

/* Original styles */

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}

<div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <div class="button-wrapper">
    <button>Button that should be right aligned</button>
  </div>
</div>

您可以使用flex-direction，然后添加 伸縮方向:列；對于下面內容的類別，指示器和按鈕將顯示在下面內容的中心。

但是我認為你想在右邊按鈕，所以你必須在按鈕鏈接外面創建一個容器。

<div class="cont"><button>You right button</button></div>

和樣式控制為

> width:100%; 
> display:flex; 
> justify-content:flex-end;
> align-items:flex-end;