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》
更多文章：
arcgis怎么设置文本框样式？用JS怎么实现一个把一个文本框中的选中内容加粗，效果基本上和编辑器的加粗效果相同急需
2026年11月6日 10:50
2026年11月6日 10:40
bios setup（“Bios setup”怎么在电脑里面设置）
2026年11月6日 10:00
2026年11月6日 08:10
2026年11月6日 07:50
2026年11月6日 05:50
php递归删除目录（php怎么删除文件夹和文件夹下的所有文件）
2026年11月6日 03:30
vimoapp安卓手机版（制作VLog常用的APP有哪些呢）
2026年11月6日 01:50
拜登国防授权法案（少数国家对来自中国的旅客采取入境限制措施，中方：将采取对等措施）
2026年11月6日 00:40
2026年11月5日 22:50
