我有一個伸縮容器，伸縮方向設置為包含3個項目的行。我需要所有3個項目在一行，第一個和最后一個項目分別在最左側和右側，中間的第二個項目居中。我得到的問題是，按鈕(第三項)伸展超寬，并在其各自的空間填充整個寬度。非常感謝任何幫助。

.parent {
  display: flex;
  flex-direction: row;
}

.left, .right {
  flex: 1;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right"></div>
</div>

首先，您的標記是無效的。& ltbutton & gt應該是小寫的，并且應該有一個結尾& lt/button & gt；，不是結束& lt/div & gt；。一旦你糾正了這個錯誤...

您可以使用justify-content控制元素的間距。還有，去掉flex:1；因為這是顯式地告訴元素增長。

例如:

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right"></button>
</div>

您可以將& ltbutton & gt在一個& ltdiv class = & quot右& quot& gt并使用justify-content:end on the:

.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}

.right {
  display: flex;
  justify-content: end;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">
    <button>RightFoobarLoremIpsum</button>
  </div>
</div>

您正在兩個側邊項目上設置flex: 1。如此指定，它設置flex-grow: 1和flex-basis: 0:您是在告訴兩個邊項增長，而不是中心項。

你可以讓它們都不生長并平均分布，或者讓中間的生長而不是邊上的。

分發:

.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.parent > * {
  outline: 1px solid red;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <button class="right">Right</div>
</div>

將按鈕放在& ltdiv class = & quot右& quot& gt

.parent {
  display: flex;
  flex-direction: row;
}

.left {
  flex: 1;
  text-align: left;
}


.right {
  flex: 1;
  text-align: right;
}

.btn {
  padding: 0 10px;
}

<div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"><button class="btn">test</button></div>
</div>