CSS flexbox居中[重复]

Posted

技术标签:

【中文标题】CSS flexbox居中[重复]【英文标题】：CSS flexbox centering [duplicate] 【发布时间】：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 应该右对齐（就像现在一样）。

我该怎么做？

谢谢。

【问题讨论】：

【参考方案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 ，都应该绝对居中元素。

以上是关于CSS flexbox居中[重复]的主要内容，如果未能解决你的问题，请参考以下文章

CSS Flexbox - 相对于父元素居中所有具有全高的子元素[重复]

使用css Flexbox实现垂直居中

CSS：flexbox的第一个孩子向左并休息到中心[重复]

Flexbox：如何垂直居中[重复]

表格不会使用 flexbox 垂直居中 [重复]

使用 flexbox 使文本居中，然后将剩余 50% 的按钮居中 [重复]