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

概述如何实现图片上绘制的布局？例如.左侧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>< 如何实现图片上绘制的布局？例如.左侧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>

解决方法 FlexBox的

使用7项.

一个在中心.

每一方都有3个.

在右侧隐藏一个可见性：隐藏.

如果您不想在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的干净有效的解决方案：

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>

总结

以上是内存溢出为你收集整理的html – 当每侧有不同数量的项目时,将Flex项目连续居中全部内容，希望文章能够帮你解决html – 当每侧有不同数量的项目时,将Flex项目连续居中所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。