当每边有不同数量的项目时，将弹性项目居中

Question

如何实现画在图片上的布局？例如。左侧 3 项，居中 1 项，右侧 2 项。

ul 是橙色，黑框是物品

ul {
  display: flex;
  width: 100%;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Answer 1

如果您需要将其居中放置在其父级的正中间，那么最简单的方法是使用 3 个包装器，包含这些项目，并给它们 flex-basis: 33.333%.

有了这个，您就可以轻松控制项目在较小屏幕上的包装方式。

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li {
  flex-basis: 33.333%;
  display: flex;
}

ul li:nth-child(2) span {
  margin: auto;                          /*  align center  */
}

ul li:nth-child(3) span:first-child {
  margin-left: auto;                     /*  align right  */
}

<ul>
  <li>
    <span>Item 1</span><span>Item 2</span><span>Item 3</span>
  </li>
  <li>
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span><span>Item 6</span>
  </li>
</ul>

另一种选择是在 left/right 包装器上使用 flex: 1 1 0

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li {
  display: flex;
}

ul li:nth-child(1),
ul li:nth-child(3) {
  flex: 1 1 0;
}

ul li:nth-child(3) span:first-child {
  margin-left: auto;
}

<ul>
  <li>
    <span>Item 1</span><span>Item 2</span><span>Item 3</span>
  </li>
  <li>
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span><span>Item 6</span>
  </li>
</ul>

保持现有标记的另一个方法是使用自动边距，但居中将介于 3 和 5 之间。

ul {
  display: flex;
  width: 100%;
  list-style: none;
  padding: 0;
}

ul li:nth-child(4) {
  margin: auto;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Answer 2

弹性框

使用 7 件物品。

一个在中间。

双方各有3个

用 visibility: hidden 在右边隐藏一个。

如果您不想在 DOM 中添加假项目，请改用伪元素，也可以使用 visibility: hidden.

此处有更多详细信息：

网格

如果您对另一种 CSS3 技术持开放态度，则可以避免上述 flexbox hacks。这是一个使用 Grid 的干净有效的解决方案：

ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 50px;
  grid-gap: 10px;
  grid-template-areas: " item1 item2 item3 item4 ... item5 item6 ";
}

li:nth-child(1) { grid-area: item1; }
li:nth-child(2) { grid-area: item2; }
li:nth-child(3) { grid-area: item3; }
li:nth-child(4) { grid-area: item4; }
li:nth-child(5) { grid-area: item5; }
li:nth-child(6) { grid-area: item6; }

/* non-essential demo styles */
p {
  text-align: center;
}
span {
  background-color: yellow;
  padding: 5px;
}
li {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: black;
}
ul {
  background-color: red;
  list-style: none;
  margin: 0;
  padding: 10px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
<p><span>TRUE CENTER</span></p>

Answer 3

这里是：

* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style:none;
}

ul {
  display:flex;
  width:100%;
  background-color: yellow;
  justify-content: space-between;
}

span {
  width: 50px;
  height: 50px;
  background-color: violet;
}

span + span {
  margin-left: 25px;
}

li {
  display: flex;
  flex-direction: row;
}

.centered {
  margin-left: -75px;
}

<ul>
  <li>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </li>
  <li class="centered">
    <span>Item 4</span>
  </li>
  <li>
    <span>Item 5</span>
    <span>Item 6</span>
  </li>
</ul>

如有任何不清楚的地方，请随时提问。

Answer 4

我认为 flexbox 是一个很好的解决方案。我创建了一个 codepen，您可以在其中查看我的解决方案的结果。它使用 <div>s 但您可以将它们改回 <ul>.

HTML :

<div class="container">
    <div class="inter first">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
    <div class="inter second">
        <div class="content"></div>
    </div>
    <div class="inter first">
        <div class="content dont-mind-me"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</div>

CSS :

.container {
    width: 600px;
    height: 20px;
    display: flex;
    background-color: orange;
}

.inter {
    flex: 1 0 auto;
    display: flex;
}
.first {
    justify-content: space-between;
}

.second {
    justify-content: center;
}

.content {
    flex: 0 1 60px;
    height: 20px;
    background-color: black;
}

.dont-mind-me {
    visibility: hidden;
}

Answer 5

如果不想更改标记，可以使用 Grid 布局而不是 Flexbox：

ul {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto 1fr auto 1fr auto auto;
  grid-column-gap: 20px;
  list-style: none;
  padding: 0;
}

li {
  width: 50px;
  height: 50px;
  background: #000;
  color: #fff;
}

li:nth-child(5) {
  grid-column: 6;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

当每边有不同数量的项目时，将弹性项目居中

Center a flex item in a row when there are a different number of items on each side

html

css

flexbox

css-grid

弹性框

网格