当每侧有不同数量的项目时，将Flex项目连续居中

Question

如何在图片上绘制此布局？例如。左侧3个项目，一个居中，右侧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%。

通过这种方式，您可以轻松控制物品在较小屏幕上的包装方式。

＆＃13;

＆＃13;

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  */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一个选择是在左/右包装器上使用flex: 1 1 0

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox的

使用7项。

一个在中心。

每一方都有3个。

使用visibility: hidden在右侧隐藏一个。

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

此处有更多详情：

• Center and right align flexbox elements
• How can you keep the center box centered in a flex box layout?

网格

如果你对另一种CSS3技术开放，你可以避免上面的flexbox黑客攻击。这是一个使用Grid的简洁有效的解决方案：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

＆＃13;

＆＃13;

HomeComponent

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是：

* {
  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 5

我认为flexbox是一个很好的解决方案。我创建了一个codepen，您可以在其中查看我的解决方案的结果。它使用<div>，但您可以将其更改回<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;
}