时间戳

首页 > 解决方案 > 均匀间隔子级，但将父级与 flex 右对齐

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

问题描述

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

目的是使菜单与右侧对齐。如何做到这一点？

.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>

标签： htmlcssflexboxalignment

解决方案

要将菜单项向右对齐margin-left: auto，我们可以在ul. 也许您也想将默认值 padding设置ul为零。

请参阅下面的演示：

.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>

推荐阅读