当每边有不同数量的项目时，将一个弹性项目放在一行中央

本文介绍了当每边有不同数量的项目时，将一个弹性项目放在一行中央的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 如何在图片上实现这种布局？例如。 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的解决方案： < 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 itemsul { 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> 解决方案 FlexboxUse 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 elementsHow can you keep the center box centered in a flex box layout?GridIf 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> 这篇关于当每边有不同数量的项目时，将一个弹性项目放在一行中央的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！