如何正确地将这些元素与flexbox对齐？

Question

对于非常模糊的问题标题感到抱歉，但我不知道如何最好地描述它......

采用以下代码示例：

＆＃13;

＆＃13;

.wrapper {
  border: 2px solid green;
}

.container { 
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
  border: 2px solid red;
  margin: 5px;
  height: 64px;
}

.item {
  display: flex;

  border: 2px solid #0000ff;
  padding: 3px;
}

.left {
  justify-content: flex-end;
}

.right {
  justify-content: flex-start;
}

＆＃13;

<div class="wrapper" style="width: 100%">
  <div class="container">
    <div class="item left">FIXED</div>
    <div class="item right">abc</div>
  </div>
  <div class="container">
    <div class="item">FIXED</div>
  </div>
  <div class="container">
    <div class="item left">FIXED</div>
    <div class="item right">abcdefgh</div>
  </div>
</div>
<br />
<div class="wrapper" style="width: 50%">
  <div class="container">
    <div class="item left">FIXED</div>
    <div class="item right">abc</div>
  </div>
  <div class="container">
    <div class="item">FIXED</div>
  </div>
  <div class="container">
    <div class="item left">FIXED</div>
    <div class="item right">abcdefgh</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

观察：

• FIXED表示固定大小的元素，始终相同的宽度/高度。
• 右侧元素的大小可能会有所不同（主要是宽度）。
• 右侧元素始终与左侧对齐。
• 左侧元素始终与左侧对齐。

我想要实现的目标：

• FIXED元素应始终位于红色行的居中。
• 第一行/第三行的FIXED元素需要与第二行FIXED元素的右侧对齐。

这是一张图片，可以更好地展示我正在寻找的内容：

编辑：我的最终解决方案基于@vals答案。我不得不改变这一点，因为我在React应用程序中使用带有选择器组合的CSS模块，每个元素需要一个类。

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
  /* UNREQUIRED (FOR DEMONSTRATION ONLY) */
  border: 2px solid red;
  padding: 5px;
}

.container::before {
  content: "";
  flex: 1 0 14px; /* UNREQUIRED (FOR DEMONSTRATION ONLY) (14px -> 0) */
}

.container-single {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  
  /* UNREQUIRED (FOR DEMONSTRATION ONLY) */
  border: 2px solid red;
  padding: 5px;
}

.item {
  display: flex;
  flex: 0 0 auto;
  
  /* UNREQUIRED (FOR DEMONSTRATION ONLY) */
  border: 2px solid #0000ff;
  padding: 5px;
}

.item-right {
  display: flex;
  flex: 1 0 0;
  
  /* UNREQUIRED (FOR DEMONSTRATION ONLY) */
  border: 2px solid #0000ff;
  padding: 5px;
}

.item-left {
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
  
  /* UNREQUIRED (FOR DEMONSTRATION ONLY) */
  border: 2px solid #0000ff;
  padding: 5px;
}

＆＃13;

<div class="container">
  <div class="item-left">FIXED</div>
  <div class="item-right">abc</div>
</div>
<br />
<div class="container-single">
  <div class="item">FIXED</div>
</div>
<br />
<div class="container">
  <div class="item-left">FIXED</div>
  <div class="item-right">abcdefgh</div>
</div>

＆＃13;

＆＃13;

＆＃13;

对于任何感兴趣的人，CSS选择器组合都是这样的：

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.container::before {
    flex: 1 0 0;
    content: "";
}

.container-single {
    composes: container;
}

.item {
    display: flex;
    flex: 0 0 auto;
}

.item-right {
    flex: 1 0 0;

    composes: item;
}

.item-left {
    margin-left: auto;

    composes: item;
}

Answer 1

我稍微改变了布局，我在单个容器上添加了一个类。

正确的元素成长是否合适？

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid red;
  padding: 5px;
}
.item {
  display: flex;
  flex-basis: auto;
  flex-grow: 0;
  border: 2px solid #0000ff;
  padding: 5px;
}
.item.right {
  flex-basis: 0;
  flex-grow: 1;
}
.item.left {
  margin-left: auto;
}
.container:not(.single):before {
  content: "";
  flex-basis: 14px;  /* border 2px + padding 5px */
  flex-grow: 1;
}
.single .item {
  margin: 0px auto;
}

＆＃13;

<div class="container">
  <div class="item left">FIXED</div>
  <div class="item right">abc</div>
</div>
<br />
<div class="container single">
  <div class="item">FIXED</div>
</div>
<br />
<div class="container">
  <div class="item left">FIXED</div>
  <div class="item right">abcdefgh</div>
</div>

＆＃13;

＆＃13;

＆＃13;