嵌套容器中的伸缩项目按 百分比 调整大小。
.col-one{ width: 40%; height: 100px; border: 1px solid lightgreen;}.col-two{ width: 40%; height: 100px; border: 1px solid red;}由于百分比长度基于父级的长度,因此 没有理由进行包装 。它们将始终是父级的40%,即使父级的宽度为1%。
如果您使用其他长度单位,例如
px或
em,它们将自动换行。
.container { display: flex; justify-content: center; align-items: center; flex-flow: row wrap; height: 100vh; } .sub-con { flex: 1; align-content: flex-start; margin-right: 50px; margin-left: 50px; height: 500px; background-color: #fff; display: flex; justify-content: center; flex-flow: row wrap; } .col-one { width: 200px; height: 100px; border: 1px solid lightgreen; } .col-two { width: 200px; height: 100px; border: 1px solid red; }<div > <div > <div ></div> <div ></div> </div></div>


