Question

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

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

编辑

一些答案使典型的第一个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>

Answer 1

我不能完全确定我了解您要完成的目标，但这听起来像是您追求的目标？

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

<div *ngIf="test else nodData">
  Data Available      
</div>
<template #nodData>No Data available</template>

* {
  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%;
}

Answer 2

一种解决方法是，给li.middle元素比其他flex-grow元素更高的flex-shrink优先级和更低的li优先级。

样式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>

Answer 3

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

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

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

如何使用Flexbox或网格在视口中心对齐一个项目？

3 个答案: