html - 当屏幕尺寸减小(宽度)时,如何使 flex 容器在行中显示 div?
问题描述
我想让这个 flex 容器(.flex-container)能够在屏幕尺寸减小时按行显示 div。这个弹性容器内部也有一个网格容器。我希望蓝色 div 先行,红色容器先行。我尝试了 flex-direction 并将网格容器的显示更改为 flex 但它没有奏效。
这是我的代码:
.flex-container {
height: 900px;
background-color: black;
display: flex;
}
.my-info-menu {
background-color: blue;
height: 800px;
width: 25%;
}
.container {
width: 80%;
}
.grid-container {
width: 95%;
height: 600px;
display: grid;
margin: 0 auto;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
}
.grid-item {
background: red;
color: blueviolet;
height: 80%;
width: 95%;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
.flex-container {
height: 2000px;
flex-direction: row;
}
.grid-container {
display: flex;
flex-direction: row;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="flex-container">
<div class="my-info-menu"></div>
<div class="container">
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</div>
</div>
解决方案
有了flex
,您可以使用flex-wrap
和min-width
创建断点。flex
orgrid
可以轻松地使用gap
属性和flex-grow
(或fr
)规则在元素之间调度和创建标尺。
这是我猜你尝试做的一个例子。
* {
margin: 0;
box-sizing: border-box;
}
.flex-container {
min-height: 100vh;
background-color: black;
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.my-info-menu {
background-color: blue;
min-width: 25%;
flex-grow: 1;
}
.container {
min-width: 500px;
flex-grow: 1;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
min-height: 100%;
gap: 1em;
}
.grid-item {
background: red;
color: blueviolet
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="flex-container">
<div class="my-info-menu">run me in full page mode<br> reset the min-width value to set where break points should happend<br> same for the min-height value of container , if screenHeight is not what you need.</div>
<div class="container">
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</div>
</div>
推荐阅读
- mobile-website - 我如何获取 api。在我的网站链接之前
- c# - onmouseover 根据数据库中的值更改文本
- swift - 在一个类中引用一个类的实例数组会创建一个强引用循环吗?
- c# - 将匹配文件名的文件批量移动到 C# 中的文件夹或使用脚本
- typescript - TypeScript - Copy-Constructor(不允许多个构造函数实现)
- c++ - 在编译时用 uknown 类型推断函数重载
- android - 使用底部导航视图移动到另一个片段后应用程序空白
- mysql - MySQL - 使用带有 DATE_ADD 和 DATE_SUB 的 COALESCE 来获取下一个/上一个记录
- javascript - 从选择下拉列表中的文本解析数字以计算数字并将文本和数字保存到数据库
- linux - 如何从文本文件中提取值列表?