如何实现CSS Flexbox中父div先于子元素换行？

首先得修正你CSS里的语法错误——属性值之间不能用逗号分隔，得用分号，不然样式根本无法生效：

.parent {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
}

.children {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
}

要实现父容器先换行、子元素内部再换行的优先级，核心是给两个.children元素设置最小宽度限制，让它们在父容器空间不足时，优先被父级的flex-wrap: wrap挤到下一行，而不是先收缩或者内部元素先折行。

具体做法：

• 给.children添加min-width属性，值可以根据内容需求设置。比如用fit-content让它自适应内容宽度，或者设置固定的最小宽度（比如min-width: 300px）：

.children {
   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   min-width: fit-content; /* 或者固定值，比如300px */
}

原理是：默认情况下flex子项的flex-shrink值为1，会自动收缩来适应父容器宽度。设置min-width后，子项不会收缩到小于这个宽度，当父容器装不下两个.children时，就会触发父级的换行；只有当单个.children的空间也装不下内部元素时，才会触发子元素内部的换行，刚好符合你要的层级优先逻辑。

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