CSS Flex布局管理：创建非聚合式Flex容器（附Demo代码）

嘿，我完全懂你的需求——你想用Flex布局管理元素，但现在的代码会让所有子元素挤在一块儿，这可不是你想要的效果。咱们来一步步调整代码解决这个问题：

问题根源 #

你当前代码里的justify-content: center是罪魁祸首：这个属性会把所有Flex子元素集中对齐到容器的水平中心，自然就会让它们聚在一起啦。

解决方案：替换justify-content属性 #

根据你想要的布局效果，选下面对应的属性就行：

1. 子元素两端对齐，中间自动均分间距（最常用）

用justify-content: space-between，子元素会贴住容器的左右边缘，中间的空白会自动分给各个子元素之间：

.flex-container {
  display: flex;
  justify-content: space-between; /* 替换原来的center */
  background-color: DodgerBlue;
  padding: 0 10px; /* 可选：避免子元素贴住容器边缘太生硬 */
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

2. 子元素周围（包括两端）都有相等间距

如果想要容器两端也和子元素之间有一样的空白，用justify-content: space-evenly（注意：旧版浏览器可能不支持，兼容性稍差）；或者用space-around（两端空白是中间间距的一半，兼容性更好）：

/* space-evenly 示例 */
.flex-container {
  display: flex;
  justify-content: space-evenly;
  background-color: DodgerBlue;
}

3. 子元素从左到右自然排列（不聚合）

如果只是不想让它们聚在中心，想从容器左侧开始依次排列，直接用默认的justify-content: flex-start（甚至可以不写，因为这是Flex布局的默认值）：

.flex-container {
  display: flex;
  /* 去掉原来的center，默认就是flex-start */
  background-color: DodgerBlue;
}

额外小提示 #

如果容器宽度不够，子元素可能会被压缩或者溢出，这时候可以加上flex-wrap: wrap让子元素自动换行，再用align-content控制换行后的行间距哦～

内容的提问来源于stack exchange，提问作者Parth Jasani