CSS flexbox居中[重复]答案

【问题标题】：CSS flexbox centering [duplicate]CSS flexbox居中[重复]
【发布时间】：2020-06-17 09:13:01
【问题描述】：

我有以下代码 sn-p（仅 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>

如您所见，由于.container 中的CSS 属性justify-content: space-between;，中间菜单（.menu2 类的nav）在.menu1 和.menu3 之间等距分布。这是正确的。

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

我该怎么做？

谢谢。

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

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

溢出：隐藏对于确保内容不会超出 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>

【讨论】：

【解决方案2】：

在我看来，网格似乎比 flex 更好。然后您可以将初始和最后一个 ul 更改为 display: inline-flex 然后，为了使最后一个 ul 与末尾对齐，您向其导航元素 (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;
}

【讨论】：

【解决方案3】：

我知道它不是 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>

【讨论】：

【解决方案4】：

你必须使用 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>

【讨论】：

这是 imo 的最佳方式。正如OP所说的“忽略重叠”，没有办法（据我所知）避免元素的框尺寸。因此，只需绝对设置中间元素，并且分别执行 margin-left: auto 和 margin-right: auto ，都应该绝对居中元素。