使用Flexbox实现等分布局只需设置父容器display: flex和子元素flex: 1，可平均分配空间；通过flex-basis可精确控制等分数；配合gap属性可添加间距；子元素默认等高，适合响应式布局。
使用 CSS 的 Flexbox 实现等分布局非常简单，关键是正确设置容器的 display 和子元素的伸缩属性。下面介绍几种常见方式。
1. 基础等分布局（平均分配宽度）
让多个子元素在父容器中平均占据相等的空间。
HTML 结构：1234
CSS 样式：
.container {
display: flex;
}
.item {
flex: 1;
}
说明：每个子元素设置 flex: 1，表示它们将平分剩余空间。无论有多少个子项，都会等宽排列。
立即学习“前端免费学习笔记（深入）”；
2. 固定数量的等分（如三等分）
如果明确知道要分成几份，也可以用 flex-basis 控制基础宽度。
.container {
display: flex;
}
.item {
flex: 1;
/ 或者写成 flex: 1 1 0%; 如果希望更精确控制 /
}
这种写法在响应式布局中很实用，能自动适应容器宽度。
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
3. 带间距的等分布局
实际开发中常需要子项之间有间隔。推荐使用 gap 属性，避免外边距错位问题。
.container {
display: flex;
gap: 10px;
}
.item {
flex: 1;
}
注意：gap 在 Flex 容器中直接生效，无需额外处理 margin。
4. 等高列布局（额外优势）
Flexbox 的另一个好处是子元素默认等高。
.container {
display: flex;
height: 200px; /* 设置容器高度 */
}
.item {
flex: 1;
background: #eee;
}
即使内容不同，所有子项高度会自动拉伸到容器高度。
基本上就这些。只要父容器设为 display: flex，子元素用 flex: 1，就能快速实现等分布局，兼容性好且响应式自然。不复杂但容易忽略细节，比如别忘了去掉子元素的固定宽度。
