display：flex之常用项目列表布局案例

display：flex之常用项目列表布局案例 四个DIV，两个一行，共两行 六个DIV，每行三个，共两行 六个DIV，每行两个，共三行 八个DIV，四个一行，共两行 九个DIV，三个一行，共三行 更多案例补充中……

四个DIV，两个一行，共两行

.container {
  display: flex;
  flex-wrap: wrap; // 允许子元素换行
}

.item {
  flex: 1 1 calc(50% - 10px); // 每个盒子占据 50% 的宽度减去一些间距（这里假设有 10px 的左右间距）
  margin: 5px; // 假设每个盒子之间有 10px 的间距（左右各 5px）
  box-sizing: border-box; // 确保 padding 和 border 不会影响元素的宽度和高度计算
  // 其他样式，如背景色、边框等，可以根据需要添加
}

六个DIV，每行三个，共两行

.container {
  display: flex;
  flex-wrap: wrap; /* 强制换行 */
}

.item {
  flex: 1 1 calc(100% / 3); /* 每个项目占据容器宽度的三分之一，允许增长和收缩 */
  box-sizing: border-box; /* 确保内边距和边框被包含在宽度和高度内 */
}

/* 可选：如果你希望在项目之间或周围有间距 */
.container {
  gap: 10px; /* 如果支持的话，可以使用gap来设置项目之间的间距 */
  /* 或者直接为.item添加margin来控制间距 */
}

.item {
  margin: 5px; /* 根据需要调整 */
}

简化版，不考虑旧浏览器的兼容性

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项目之间的间距 */
}

.item {
  flex: 1 1 calc(33.333% - 10px); /* 减去间距以确保完美对齐 */
  box-sizing: border-box;
}

六个DIV，每行两个，共三行

.container {
  display: flex;
  flex-wrap: wrap; /* 强制换行 */
}

.item {
  flex: 1 1 calc(50% - 10px); /* 每个项目占据容器宽度的一半，减去间距 */
  margin: 5px; /* 设置项目的外边距，上下左右各5px */
  box-sizing: border-box; /* 确保内边距和边框被包含在宽度和高度内 */
}

/* 如果你希望直接控制项目之间的间距而不是通过margin，可以使用gap */
.container {
  gap: 10px; /* 如果支持的话，可以使用gap来设置项目之间的间距 */
  /* 注意：如果你使用gap，则需要调整flex计算公式中的减数值 */
}

简化版

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项目之间的间距 */
}

.item {
  flex: 1 1 calc(50% - (10px / 2)); /* 减去半个gap，因为每行只有两个项目 */
  box-sizing: border-box;
}

八个DIV，四个一行，共两行

.container {
  display: flex;
  flex-wrap: wrap; /* 强制换行 */
  gap: 10px; /* 如果需要，可以使用gap来设置项目之间的间距 */
}

.item {
  flex: 1 1 calc(25% - 10px / 4 * 3); /* 每个项目占据容器宽度的25%，并根据gap调整 */
  box-sizing: border-box; /* 确保内边距和边框被包含在宽度和高度内 */
}

/* 如果你选择使用margin来控制间距，可以这样设置 */
/*.item {
  flex: 1 1 25%; 
  margin: 5px; /* 根据需要调整 */
  box-sizing: border-box;
}*/

简化版

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项目之间的间距 */
}

.item {
  flex: 1 1 25%; /* 每个项目占据容器宽度的25% */
  box-sizing: border-box;
}

九个DIV，三个一行，共三行

.container {
  display: flex;
  flex-wrap: wrap; /* 强制换行 */
  gap: 10px; /* 如果需要，可以使用gap来设置项目之间的间距 */
}

.item {
  flex: 1 1 calc(33.333% - (10px * 2 / 3)); /* 每个项目占据容器宽度的大约三分之一，减去间隙 */
  box-sizing: border-box; /* 确保内边距和边框被包含在宽度和高度内 */
}

/* 如果你选择使用margin来控制间距，可以这样设置 */
/*.item {
  flex: 1 1 33.333%; 
  margin: 5px; /* 根据需要调整 */
  box-sizing: border-box;
}*/

简化版

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 项目之间的间距 */
}

.item {
  flex: 1 1 33.333%; /* 每个项目占据容器宽度的大约三分之一 */
  box-sizing: border-box;
}

更多案例补充中……