css平均分布（css平均三列）

简介：

在网页设计中，CSS平均分布是一种常见的排版技巧，可以让页面元素均匀地分布在容器中，使页面看起来整洁美观。本文将介绍CSS平均分布的几种常见方法及实现方式。

一、使用Flexbox实现CSS平均分布

Flexbox是CSS3中新增的一种布局模型，可以方便地实现页面元素的排列和分布。通过设置容器的display为flex，再设置justify-content属性为space-between或者space-around，即可实现容器内元素的平均分布。

二、使用Grid布局实现CSS平均分布

Grid布局是CSS3中另一种强大的布局模型，可以基于网格线来实现页面元素的排列和分布。通过设置容器的display为grid，再设置grid-template-columns属性为repeat(auto-fill, minmax(100px, 1fr))，即可实现元素的平均分布。

三、使用calc()函数实现CSS平均分布

在某些情况下，Flexbox和Grid布局并不能完全实现理想的平均分布效果。这时可以借助calc()函数来计算元素的宽度或者间距，从而达到平均分布的效果。比如设置元素的宽度为calc(100% / n)，其中n为元素的个数。

四、使用text-align和margin实现CSS平均分布

如果只是需要实现文本内容的平均分布，可以借助text-align属性将文本居中对齐，再通过设置margin属性来控制文本之间的间距，从而实现文本的平均分布效果。

结论：

CSS平均分布是网页设计中常见的布局技巧，通过Flexbox、Grid布局、calc()函数等方法可以方便地实现页面元素的平均分布效果。在实际项目中，可以根据具体情况选择合适的方法来实现页面的排版布局，使页面看起来更加整洁美观。