CSS flexbox居中[重复]

问题描述 投票：1回答：4

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

[您注意到，由于nav中的CSS属性.menu2，中间菜单（类别为.menu1的.menu3在justify-content: space-between;和.container之间等距）。这是正确的。

但是，我需要确保.menu2位于.container的中心。换句话说，它在.menu1和.menu3之间不会等距分布。我希望它在.container中居中（并且不必担心菜单项重叠；每个菜单中的菜单项都会减少，因此它们不会重叠。我在此处添加了很多示例以演示间距问题）。同样，.menu1也应该左对齐，.menu3应该右对齐（就像现在一样）。

我该怎么做？

谢谢。

html css flexbox centering
4个回答
2
投票

在我看来，网格似乎比flex更好。然后可以将初始和最后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;
}

looks like this

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>
0
投票

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

我将.menu1-3设置为不同的flex规则，让外面的规则尝试平等地谈论很多空间，而中间的那些则只需要它。

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

根据您的需要，您可以考虑给中间的列指定一个特定的flex-base，例如固定像素或百分比（就像所有3个.menu都获得33.33％）。如果需要，也可以添加边距（到中间列）。

具有网格和绝对位置的解决方案也可能根据您的需要完成工作。位置：绝对具有最佳的浏览器支持，如今，我的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.