如何在图片上实现这种布局？例如。 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?
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>
更多推荐
当每边有不同数量的项目时,将一个弹性项目放在一行中央
发布评论