如何同时实现宽度限制与gap属性的有效应用？

你遇到的问题核心是想让容器内元素有固定/最大宽度，不用逐个设置子元素宽度，同时保留flex的gap间距。这里有几个简单解决方案：

方案1：给容器设置最大宽度并居中 #

通过给flex容器添加max-width和水平居中的margin，子元素用width:100%会自动继承容器的最大宽度，不会撑满全屏，同时gap完全保留：

body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 100vh;
    /* 新增：限制容器最大宽度 */
    max-width: 600px; /* 可根据需求调整数值 */
    margin: 0 auto; /* 水平居中容器 */
}

.container--example {
    background-color: #000;
    width: 100%; /* 子元素宽度适配容器 */
    height: 100px;
}

方案2：容器加内边距，子元素左对齐 #

如果不需要容器居中，想让子元素左对齐展示，只需修改align-items并给容器加左右padding，子元素width:100%会自动适配padding后的可用宽度：

body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-height: 100vh;
    /* 修改对齐方式为左对齐 */
    align-items: flex-start;
    /* 左右内边距限制子元素宽度 */
    padding: 0 24px;
    box-sizing: border-box; /* 确保padding不会撑大容器 */
}

.container--example {
    background-color: #000;
    width: 100%;
    height: 100px;
}

关于gap“失效”的澄清 #

flex的gap是容器属性，只要容器保持display:flex，不管子元素设置什么宽度，gap都不会失效。你之前觉得gap消失，大概率是子元素宽度缩小后，gap的视觉存在感变弱，但它实际上依然在起作用。

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