当每边有不同数量的项目时，将一个弹性项目放在一行中央 [英] Center a flex item in a row when there are a different number of items on each side

问题描述

如何在图片上实现这种布局？例如。 3个项目在左侧，一个居中，2个在右边。

ul是橙色颜色，黑色方块是项目 / p>

  ul {display：flex; width：100％;}  

< ul> < li>第1项< / li> < li>第2项< / li> < li>第3项< / li> < li>第4项< / li> < li>第5项< / li> < li>第6项< / li>< / ul>

h2_lin>解决方案

Flexbox

使用7个项目

每边有3个。

在右边隐藏一个可见性：隐藏。

如果您不想在DOM中添加一个伪项目，请使用伪元素 visibility：hidden 。

更多细节在这里：

• 中心和右对齐flexbox元素


• <你怎么能保持中心框中心在一个弹性框布局？

---

网格

如果您打算使用另一个CSS3技术， flexbox黑客上面。这里有一个干净而有效的使用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：n-child（6）{grid-area：item6; } / *非必要的演示样式* / p {text-align：center;} span {background-color：yellow; padding：5px;} li {display：flex; align-items：center; justify-content：center;白颜色; background-color：black;} ul {background-color：red; list-style：none;保证金：0; padding：10px;}

< ul> < li>第1项< / li> < li>第2项< / li> < li>第3项< / li> < li>第4项< / li> < li>第5项< / li> < li>< / ul>< p>< span> TRUE CENTER< / span>< / p>

How do I achieve this layout drawn on the picture? E.g. 3 items on left side, one centered, 2 on the right.

the ul is the orangish color and the black boxes are the items

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>

解决方案

Flexbox

Use 7 items.

One in the center.

Each side has 3.

Hide one on the right with visibility: hidden.

If you don't want to add a fake item in the DOM, then use a pseudo-element instead, also with visibility: hidden.

More details here:

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

---

Grid

If you're open to another CSS3 technology, you can avoid the flexbox hacks above. Here's a clean and valid solution using 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>

这篇关于当每边有不同数量的项目时，将一个弹性项目放在一行中央的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！