display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
本文目录
overflow-y:hidden;overflow-x:auto;无效解决方法
overflow-y:hidden;overflow-x:auto;无效？
注意：子元素不能浮动；
父元素不能使用display：flex;
还有一种情况：就是自动换行了，，，试着加个white-space:nowrap;
三个div呈品字形排列用css3的flex方式怎么写
既然楼主说是弹性盒，那就用弹性盒的相关术语来进行分析。
首先分析图片，一个大容器中包含三个项目，你会发现单纯的给容器加一个display:flex;的声明是不可以的，因为这个声明默认容器内的项目在一行显示，并且不会溢出。
那么我们就需要一个声明让项目遇到容器边界时自动换行，就是flex-wrap: wrap;这个声明。
换行之后你会发现项目与容器的边界是挨在一起的，从图中明显可以看出项目div1在主轴上是居中显示的，三个项目在交叉轴上又是居中，那么
justify-content: space-around;表示 自动分配距离，每个项目两侧的间隔相等。
align-items: center;表示交叉轴居中。
参考代码如下：
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》《/title》
《style type="text/css"》
html,body{margin:0;padding:0;}
.box{width:500px;height:500px;border:1px solid #faa;margin:50px auto;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.box div:nth-child(1){width:450px;height:200px;border:1px solid #faa;}
.box div:nth-child(2){width:200px;height: 150px;border:1px solid #faa;}
.box div:nth-child(3){width: 150px;height:100px;border:1px solid #faa;}
《/style》
《/head》
《body》
《div class="box"》
《div》1《/div》
《div》2《/div》
《div》3《/div》
《/div》
《/body》
《/html》
或者第二个参考代码如下
《!DOCTYPE html》
《html》
《head》
《meta charset="UTF-8"》
《title》《/title》
《style type="text/css"》
html,body{margin:0;padding:0;}
.box{width:600px;height:500px;border:1px solid #faa;margin:50px auto;
padding:10px;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.box div:nth-child(1){width:600px;height:200px;border:1px solid #faa;}
.box div:nth-child(2){width:260px;height: 150px;border:1px solid #faa;}
.box div:nth-child(3){width: 200px;height:100px;border:1px solid #faa;}
《/style》
《/head》
《body》
《div class="box"》
《div》1《/div》
《div》2《/div》
《div》3《/div》
《/div》
《/body》
《/html》
更多文章：
2026年9月7日 16:10
2026年9月7日 15:40
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
下载mysql的步骤（win10安装mysql的步骤和方法）
2026年9月7日 04:10
