CSS平均分布

小蓝 • 2024-11-29 13:52 • 编程

一、使用Flexbox实现平均分布

.container {
  display: flex;
  justify-content: space-between;
}
.container div {
  flex-basis: calc(33.33% - 10px);
}

Flexbox布局是常用的实现平均分布的方式。在父容器中设置display: flex;即可使用弹性盒子布局。justify-content: space-between;可以让子元素之间平均分布。然而，flex-basis只是子元素占据的空间的初始值，如果子元素的内容过多，它仍然可以溢出.

二、使用Grid实现平均分布

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
.container div {
  width: 100%;
}

使用CSS网格布局也可以实现平均分布。将父容器设置为display: grid;，再设置grid-template-columns为自适应列数，每列的最小宽度为200px，宽度比例为1:1，最终达到平均分布的效果。此外，使用grid-gap设置子元素之间的边距.

三、使用定位实现平均分布

.container {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}
.container div {
  position: absolute;
  left: calc(33.33% - 10px);
  width: calc(33.33% - 10px);
}
.container div:nth-child(2) {
  left: calc(66.66% + 20px);
}

使用绝对定位和calc()函数也可以实现平均分布。在父容器中设置position: relative;和max-width，子元素使用position: absolute;进行绝对定位，并使用calc()函数计算子元素的left和width，实现平均分布。如果需要3个子元素，可以复制第二个子元素的样式，并设置left和width为适当值.

四、使用伪元素实现平均分布

.container {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}
.container::before {
  content: "";
  display: table;
}
.container::after {
  content: "";
  display: table;
  clear: both;
}
.container div {
  float: left;
  width: calc(33.33% - 10px);
  margin-right: 10px;
}
.container div:last-child {
  margin-right: 0;
}

使用伪元素也可以实现平均分布。在父容器中使用:before和:after伪元素，分别设置display为table和clear:both，以清除浮动。子元素使用float: left进行左浮动，并设置width为子元素空间的初始值（注意减去间距），padding或border-box可以解决子元素内容过多压缩的问题.

五、使用flex-grow实现平均分布

.container {
  display: flex;
}
.container div {
  flex: 1;
}

使用flex-grow属性也可以实现平均分布。在父容器中设置display: flex;，子元素添加flex: 1;即可让子元素平均分布。如果子元素的空间不足，它们会等比例地放大以填满剩余的空间.

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/189997.html