css 一行显示四个元素

### CSS 实现一行显示四个元素 为了使一行仅显示四个元素，可以采用 `flex` 布局并配合特定的属性设置。一种常见的方式是在父级容器上应用 `display: flex;`, 并加入 `justify-content: space-around;` 和 `flex-wrap: wrap;` 属性以控制子项排列方式和换行行为[^1]。 对于子元素而言，可以通过设定固定的宽度来确保每行恰好容纳四个项目。具体来说，如果希望每个项目的宽度能够自动适应屏幕尺寸变化的同时保持四列布局不变，可利用 `width: calc(100% / 4);` 来动态计算单个组件所占的空间比例。 另外，在考虑实际应用场景时，可能还需要处理元素间的间距问题。此时可以在原有基础上进一步优化，比如给定一个统一的外边距值，像这样： ```css ul { display: flex; flex-wrap: wrap; justify-content: flex-start; } li { margin-top: 10px; margin-bottom: 10px; width: calc((100% - 60px) / 4); height: 80px; &:not(:nth-child(4n)) { margin-right: 20px; } } ``` 上述代码片段展示了另一种方案，其中不仅设置了基于百分比的宽度，还引入了额外的右侧内边距（除了第四列之外），从而使得各列之间拥有适当间隔而不影响整体结构稳定性[^2]。 最后，针对更复杂的场景，如需保证多行情况下首尾两端紧密贴合父容器边缘，则建议使用如下策略： ```css .parent-container { display: flex; flex-flow: row wrap; } .child-box { box-sizing: border-box; flex-grow: 1; min-width: 0; max-width: calc(25% - 10px); /* 可选配置 */ background-color: lightblue; border: solid 1px gray; text-align: center; line-height: 5em; } ``` 这里的关键在于为 `.child-box` 类指定了一个灵活的增长因子 (`flex-grow`) 同时限定了最大最小宽度范围，以此达到既满足一行最多呈现四个单元格的要求又兼顾美观性的目的[^3]。