如何使用 flexbox 或网格在视口中心对齐一项？ [复制]答案

【问题标题】：How to align one item on viewport center using flexbox or grid? [duplicate]如何使用 flexbox 或网格在视口中心对齐一项？ [复制]
【发布时间】：2020-03-23 04:43:25
【问题描述】：

我正在使用 flexbox CSS3 创建简单的导航，我有一个包含 3 个项目的列表，但这些项目没有指定宽度。现在我想让中间项目放置在视口的中心。当我遇到这种情况时，我的中间 li 不会以视口为中心。有没有办法让一个项目和其他元素相对于这个项目居中？

查看第一次和第二次导航之间的区别。在第二次导航时，当有一个项目时，它正确地居中于视口。我想把第一个像第二个一样居中。具有 middle 类的 Li 元素必须位于视口的中心。

编辑

一些答案是典型的将第一个和最后一个 LI 移动到 UL LIST 的边缘。这不是重点，MIDDLE li 必须位于视口的中心，第一个和最后一个 LI 应该只有填充和 width: initial

回答

我无法在此处添加答案，因此我将“codepen”链接粘贴到我想要获得的答案中

https://codepen.io/freestyle09/pen/xxxvwPm

更新代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
nav {
  border: 1px solid red;
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: center;
  list-style: none;
  border: 1px solid green;
  width: 1200px;
}
ul > li {
  padding: 20px;
  white-space: nowrap;
  border: 1px solid blue;
}
li:not(.middle) {
  flex-basis: 0%;
  flex-grow: 1;
}

nav .test {
  display: flex;
  justify-content: center;
  width: 800px;
  border: 2px solid pink;
  padding: 20px
}

<nav>
  <ul>
        <li><span>Lorem ipsum sit</span></li>
    <li><span>Lorem ipsum sit</span></li>
    <li class='middle'><span>Vey long string, very very very long string</span></li>
    <li><span>About</span></li>
       <li><span>About</span></li>
  </ul>
</nav>
<nav>
  <div class='test'>
    <p>Vey long string, very very very long string</p>
  </div>
</nav>

【问题讨论】：

检查接受的重复答案中的第二个 sn-p

标签： html css

【解决方案1】：

我不完全确定我理解你想要完成的事情，但这听起来可能是你想要的？

附录，您刚刚描述了表格数据的表格的用途。希望这会有所帮助，干杯！

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  border: 1px solid red;
}

ul {
  display: table;
  width: 100%;
  list-style: none;
  align-items: center;
  border: orange 3px dashed;
}

ul > li {
  display: table-cell;
  text-align: center;
  padding: 20px;
  border: green 1px dotted;
}

ul > li:nth-child(odd) {
  width: 20%;
}

<nav>
  <ul>
    <li>Lorem ipsum sit</li>
    <li class='middle'>Vey long string, very very very long string</li>
    <li>About</li>
  </ul>
</nav>
<nav>
  <ul>
    <li>Vey long string, very very very long string</li>
  </ul>
</nav>

【讨论】：

这个很长的字符串在第一次和第二次导航中必须处于相同的位置。第二个导航以视口为中心，在第一个导航中，这些 li 元素将我的中间 li 向右移动，你看到了吗？
@Freestyle09 查看更新后的答案。
这种方法的问题是第一个 LI 元素有例如右边缘 10 像素，“关于”LI 左边缘有 20 像素，我需要保持这种动态。我知道这是一个难题，但我需要这个：/

【解决方案2】：

解决此问题的方法是为li.middle 元素赋予比其他li 元素更高的flex-grow 优先级和更低的flex-shrink 优先级。

样式flex 是：

flex-grow
flex-shrink
flex-basis

它将采用flex 值，例如：

flex: 1 1 20%; // flex-grow priority of 1, flex-shrink priority of 1, pre-flex starting width of 20%
flex: 2 0 60%; // flex-grow priority of 2, will never shrink, pre-flex starting width of 60%

使用上面的这两个值我们可以声明：

一类元素的默认宽度为 20%，并且可以扩大和缩小以填充可用宽度
另一类元素的默认宽度为 60%，比其他元素变宽的可能性是其他元素的两倍，但永远不能缩小到 60% 以下

工作示例：

nav {
  border: 1px solid red;
}
ul {
  display: flex;
  list-style: none;
  justify-content: center;
  border: 1px solid green;
  margin-left: 0;
  padding-left: 0;
}

ul > li {
  padding: 20px;
}

li {
border: 1px solid blue;
}

li {
  flex: 1 1 20%;
}

li.middle {
  flex: 2 0 60%;
  text-align: center;
}

<nav>
<ul>
<li>Lorem ipsum sit</li>
<li class="middle">Very long string, very very very long string</li>
<li>About</li>
</ul>
</nav>

<nav>
<ul>
<li class="middle">Very long string, very very very long string</li>
</ul>
</nav>

【讨论】：

有什么办法可以将这个 FIRST 和 LAST li 元素设置为 width: auto 并且只有填充？
是的，使用类似flex: 1 1 auto;的东西是完全合法的。

【解决方案3】：

将以下属性添加到您的样式中应该可以解决您的问题。

ul > li {
    padding: 20px;
    flex: 1;
    text-align: center;
}

这会将所有li 元素大小设置为相等，并将其文本与其中心对齐。

【讨论】：