CSS flexbox 居中

Question

我有以下代码片段（只有 HTML 和 CSS）

.container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}

<div class="container">
  <nav class="menu1">
    <ul>
      <li>1.1</li>
      <li>1.2</li>
    </ul>
  </nav>

  <nav class="menu2">
    <ul>
      <li>2.1</li>
      <li>2.2</li>
      <li>2.3</li>
      <li>2.4</li>
      <li>2.5</li>
      <li>2.6</li>
      <li>2.7</li>
      <li>2.8</li>
      <li>2.9</li>
    </ul>
  </nav>

  <nav class="menu3">
    <ul>
      <li>3.1</li>
      <li>3.2</li>
      <li>3.3</li>
      <li>3.4</li>
      <li>3.5</li>
      <li>3.6</li>
      <li>3.7</li>
      <li>3.8</li>
      <li>3.9</li>
    </ul>
  </nav>
</div>

如您所见，由于 CSS 属性 justify-content: space-between; .container。这是正确的。

然而，我需要的是确保 .menu2 位于 .container 的中心。换句话说，它不会在 .menu1 和 .menu3 之间等距。我希望它在 .container 内死点（不要担心菜单项重叠；我会在每个菜单中减少菜单项，所以它们不会重叠。我只是在这里添加了很多来演示间距问题).此外，.menu1 也应该左对齐，.menu3 应该右对齐（就像现在一样）。

我该怎么做？

谢谢。

Answer 1

一定要用flex吗？否则可以将菜单 2 移动到绝对位置的中心。

.container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  position: relative;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}

.menu2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<html>

<body>

  <div class="container">
    <nav class="menu1">
      <ul>
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </nav>

    <nav class="menu2">
      <ul>
        <li>2.1</li>
        <li>2.2</li>
        <li>2.3</li>
        <li>2.4</li>
        <li>2.5</li>
        <li>2.6</li>
        <li>2.7</li>
        <li>2.8</li>
        <li>2.9</li>
      </ul>
    </nav>

    <nav class="menu3">
      <ul>
        <li>3.1</li>
        <li>3.2</li>
        <li>3.3</li>
        <li>3.4</li>
        <li>3.5</li>
        <li>3.6</li>
        <li>3.7</li>
        <li>3.8</li>
        <li>3.9</li>
      </ul>
    </nav>
  </div>

</body>

</html>

Answer 2

我知道它不是 Flexbox，但您可能想看看 CSS 网格布局。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid black;
}

nav ul {
  padding: 0;
}

nav ul li {
  display: inline-block;
  list-style: none;
  padding: 0 5px;
}

<html>

<body>

  <div class="container">
    <nav class="menu1">
      <ul>
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </nav>

    <nav class="menu2">
      <ul>
        <li>2.1</li>
        <li>2.2</li>
        <li>2.3</li>
        <li>2.5</li>
        <li>2.9</li>
      </ul>
    </nav>

    <nav class="menu3">
      <ul>
        <li>3.1</li>
        <li>3.2</li>
        <li>3.3</li>
        <li>3.4</li>
        <li>3.5</li>
        <li>3.6</li>
        <li>3.7</li>
        <li>3.8</li>
        <li>3.9</li>
      </ul>
    </nav>
  </div>

</body>

</html>

Answer 3

在我看来，网格似乎比柔性更好。然后您可以将初始和最后一个 ul 更改为 display: inline-flex 然后，为了使最后一个 ul 对齐到末尾，您向其 nav 元素 (class='menu3') 添加一个属性 text-align=end

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid black;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

.menu1 ul{
    display: inline-flex;
}

.menu3{
    text-align: end;
}
.menu3 ul{
    display: inline-flex;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}

Answer 4

我会将 .menu1-3 设置为不同的 flex 规则，让外面的人尝试同样多地谈论 space，而中间的人只需要它所需要的。

溢出：隐藏对于确保内容不会超出 flex-base 很重要。但是还有其他规则具有相同的效果，具体取决于您想要的项目的行为（例如 flex-wrap 将项目包装到下一行）

根据您的需要，您可以考虑为中间列提供特定的 flex-base，如固定像素或百分比（如所有 3 .menu 获得 33.33%）。如果需要，也可以添加边距（到中间列）。

根据您的需要，使用网格和绝对位置的解决方案也可以完成这项工作。位置：absolute 拥有最好的浏览器支持，我的 flex 解决方案现在适用于大多数浏览器。据我所知，网格也应该但覆盖率最差

.container {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0;
}

nav ul li {
  list-style: none;
  padding: 0 5px;
}

.menu1, .menu3 {
  flex: 1 1 50%;
overflow: hidden;  
}

.menu1 ul {
justify-content: flex-start
}
.menu2 ul {
justify-content: flex-end
}

.menu2 {
  flex: 0 0 auto;
}

<html>

<body>

  <div class="container">
    <nav class="menu1">
      <ul>
        <li>1.1</li>
        <li>1.2</li>
      </ul>
    </nav>

    <nav class="menu2">
      <ul>
        <li>2.1</li>
        <li>2.2</li>
        <li>2.3</li>
        <li>2.4</li>
        <li>2.5</li>
        <li>2.6</li>
        <li>2.7</li>
        <li>2.8</li>
        <li>2.9</li>
      </ul>
    </nav>

    <nav class="menu3">
      <ul>
        <li>3.1</li>
        <li>3.2</li>
        <li>3.3</li>
        <li>3.4</li>
        <li>3.5</li>
        <li>3.6</li>
        <li>3.7</li>
        <li>3.8</li>
        <li>3.9</li>
      </ul>
    </nav>
  </div>

</body>

</html>

CSS flexbox 居中

CSS flexbox centering

html

css

centering

flexbox