均匀间隔子级，但将父级与 flex 右对齐

Posted 2023-03-05

【中文标题】均匀间隔子级，但将父级与 flex 右对齐

【英文标题】：Evenly space children but right-align parent with flex

【发布时间】：2019-07-12 19:42:28

【问题描述】：

我有以下代码来设置菜单。这个想法是让菜单项水平间隔均匀，但当有额外空间时，它们之间的间隔不要太远。如果有多余的空间，现在菜单向左对齐（绿色朝向黄色的左侧）。

目的是使菜单与右侧对齐。如何实现？

.wrapper 
  display: flex;
  height: 5em;

.left 
  flex: 1;
  display: flex;

.middle 
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */

ul 
  display: flex;
  max-width: 200px;

li 
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;

.right 
  flex: 1;

<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>

【参考方案1】：

这是你想要的吗？

.wrapper 
  display: flex;
  height: 5em;

.left 
  flex: 1;
  display: flex;

.middle 
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */

ul 
     display: flex;
    width: 100%;
    padding: 0;
    justify-content: flex-start;

li 
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;

.right 
  flex: 1;

<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>

【讨论】：

不完全是，我想让绿色菜单项沿黄色容器的右侧对齐。

现在它将菜单项拉伸到整个宽度。目的是限制菜单项的宽度（正如我最初所做的那样）。目标是让所有菜单项移动到黄色框的右侧。

【参考方案2】：

要将菜单项对齐到右侧，我们可以在ul 上添加margin-left: auto。也许您也想将ul 的默认 padding 设置为零。

请看下面的演示：

.wrapper 
  display: flex;
  height: 5em;

.left 
  flex: 1;
  display: flex;

.middle 
  flex: 4;
  background: #ffc;
  display: flex!important; /* this comes from the library i'm using */

ul 
  display: flex;
  max-width: 200px;
  margin-left: auto; /* ADDED */
  padding: 0; /* ADDED */

li 
  list-style: none;
  flex: 1;
  background: #cfc;
  text-align: center;

.right 
  flex: 1;

<div class="wrapper">
  <div class="left">
    <div class="tagline">Left</div>
  </div>
  <div class="middle">
    <ul>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
      <li>menu item</li>
    </ul>
  </div>
  <div class="right">
    right
  </div>
</div>