css之Flex响应式多列布局,根据容器宽度自动调整显示2列或3列布局，支持多行排列
·
display:flex时，要如何设置才可以自适应多列，答案来了，很简单，之前居然看到这个还有人要收费才能看，也真的是有才。
废话不多说，直接上代码。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex响应式多列布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
color: #333;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
max-width: 1200px;
width: 100%;
margin: 20px auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
color: white;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
}
.description {
font-size: 1.2rem;
max-width: 600px;
margin: 0 auto;
opacity: 0.9;
}
.controls {
display: flex;
justify-content: center;
gap: 15px;
margin: 30px 0;
flex-wrap: wrap;
}
.btn {
padding: 12px 25px;
background: white;
color: #2575fc;
border: none;
border-radius: 30px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.btn.active {
background: #ff4081;
color: white;
}
/* Flex容器样式 */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
/* 默认3列布局 */
.flex-item {
flex: 1 1 calc(33.333% - 20px);
min-width: 280px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.flex-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.item-header {
background: #4a6ee0;
color: white;
padding: 20px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
}
.item-content {
padding: 25px;
flex-grow: 1;
}
.item-content p {
line-height: 1.6;
margin-bottom: 15px;
color: #555;
}
.item-footer {
background: #f8f9fa;
padding: 15px 25px;
text-align: right;
border-top: 1px solid #eee;
color: #777;
font-size: 0.9rem;
}
/* 2列布局 */
.layout-2 .flex-item {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
/* 3列布局 */
.layout-3 .flex-item {
flex: 1 1 calc(33.333% - 20px);
max-width: calc(33.333% - 20px);
}
/* 响应式设计 */
@media (max-width: 900px) {
.flex-item {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
.layout-3 .flex-item {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 600px) {
.flex-item {
flex: 1 1 100%;
max-width: 100%;
}
.layout-2 .flex-item,
.layout-3 .flex-item {
flex: 1 1 100%;
max-width: 100%;
}
h1 {
font-size: 2.2rem;
}
}
.code-container {
background: #2d2d2d;
border-radius: 8px;
padding: 20px;
margin-top: 40px;
color: #f8f8f2;
font-family: 'Fira Code', monospace;
overflow-x: auto;
max-width: 100%;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
color: #ffd700;
}
.code-content {
line-height: 1.5;
}
.comment {
color: #969896;
}
.selector {
color: #a6e22e;
}
.property {
color: #66d9ef;
}
.value {
color: #ae81ff;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Flex响应式多列布局</h1>
<p class="description">根据容器宽度自动调整显示2列或3列布局，支持多行排列</p>
</header>
<div class="controls">
<button class="btn active" data-cols="auto">自动调整</button>
<button class="btn" data-cols="2">强制2列</button>
<button class="btn" data-cols="3">强制3列</button>
</div>
<div class="flex-container layout-3">
<div class="flex-item">
<div class="item-header">Flex项目 1</div>
<div class="item-content">
<p>Flex布局允许容器改变其子项的宽度/高度和顺序，以最佳方式填充可用空间。</p>
<p>Flex容器可以扩展子项以填充可用空间，或缩小它们以防止溢出。</p>
</div>
<div class="item-footer">响应式设计</div>
</div>
<div class="flex-item">
<div class="item-header">Flex项目 2</div>
<div class="item-content">
<p>使用flex-wrap属性控制Flex项目是否换行，以及如何换行。</p>
<p>默认情况下，Flex项目会尝试适应一行。您可以更改此设置并允许项目根据需要使用flex-wrap属性换行。</p>
</div>
<div class="item-footer">多行排列</div>
</div>
<div class="flex-item">
<div class="item-header">Flex项目 3</div>
<div class="item-content">
<p>使用flex属性作为flex-grow、flex-shrink和flex-basis的简写。</p>
<p>建议使用此简写而不是设置单独的属性。简写可以智能地设置其他值。</p>
</div>
<div class="item-footer">弹性比例</div>
</div>
<div class="flex-item">
<div class="item-header">Flex项目 4</div>
<div class="item-content">
<p>媒体查询可以针对不同的设备屏幕尺寸应用不同的样式规则。</p>
<p>使用@media规则在样式表的其他部分包含一组CSS属性，前提是满足特定条件。</p>
</div>
<div class="item-footer">媒体查询</div>
</div>
<div class="flex-item">
<div class="item-header">Flex项目 5</div>
<div class="item-content">
<p>gap属性在网格布局、Flex布局和多列布局中定义行和列之间的间距。</p>
<p>它是row-gap和column-gap的简写，可以同时设置行和列之间的间距。</p>
</div>
<div class="item-footer">间距控制</div>
</div>
<div class="flex-item">
<div class="item-header">Flex项目 6</div>
<div class="item-content">
<p>响应式设计使您的网页在所有设备上看起来都很棒。</p>
<p>响应式设计仅使用HTML和CSS，不是程序或JavaScript。</p>
</div>
<div class="item-footer">自适应布局</div>
</div>
</div>
<div class="code-container">
<div class="code-header">
<h3>CSS代码示例</h3>
<span>Flex布局核心代码</span>
</div>
<div class="code-content">
<span class="comment">/* Flex容器 */</span><br>
<span class="selector">.flex-container</span> {<br>
<span class="property">display</span>: <span class="value">flex</span>;<br>
<span class="property">flex-wrap</span>: <span class="value">wrap</span>;<br>
<span class="property">gap</span>: <span class="value">20px</span>;<br>
<span class="property">justify-content</span>: <span class="value">center</span>;<br>
}<br><br>
<span class="comment">/* 默认3列布局 */</span><br>
<span class="selector">.flex-item</span> {<br>
<span class="property">flex</span>: <span class="value">1 1 calc(33.333% - 20px)</span>;<br>
<span class="property">min-width</span>: <span class="value">280px</span>;<br>
}<br><br>
<span class="comment">/* 2列布局 */</span><br>
<span class="selector">.layout-2 .flex-item</span> {<br>
<span class="property">flex</span>: <span class="value">1 1 calc(50% - 20px)</span>;<br>
<span class="property">max-width</span>: <span class="value">calc(50% - 20px)</span>;<br>
}<br><br>
<span class="comment">/* 媒体查询 - 中等屏幕 */</span><br>
@<span class="value">media</span> (<span class="property">max-width</span>: <span class="value">900px</span>) {<br>
<span class="selector">.flex-item</span> {<br>
<span class="property">flex</span>: <span class="value">1 1 calc(50% - 20px)</span>;<br>
<span class="property">max-width</span>: <span class="value">calc(50% - 20px)</span>;<br>
}<br>
}<br><br>
<span class="comment">/* 媒体查询 - 小屏幕 */</span><br>
@<span class="value">media</span> (<span class="property">max-width</span>: <span class="value">600px</span>) {<br>
<span class="selector">.flex-item</span> {<br>
<span class="property">flex</span>: <span class="value">1 1 100%</span>;<br>
<span class="property">max-width</span>: <span class="value">100%</span>;<br>
}<br>
}
</div>
</div>
</div>
<script>
// 切换布局功能
document.querySelectorAll('.btn').forEach(button => {
button.addEventListener('click', function() {
// 更新按钮状态
document.querySelectorAll('.btn').forEach(btn => {
btn.classList.remove('active');
});
this.classList.add('active');
// 获取布局类型
const cols = this.getAttribute('data-cols');
const container = document.querySelector('.flex-container');
// 移除现有布局类
container.classList.remove('layout-2', 'layout-3');
// 添加新布局类
if (cols !== 'auto') {
container.classList.add('layout-' + cols);
}
});
});
</script>
</body>
</html>
关键点说明
-
display: flex - 创建Flex容器
-
flex-wrap: wrap - 允许项目换行
-
gap: 20px - 设置项目之间的间距
-
flex: 1 1 calc(33.333% - 20px) - 设置项目弹性比例和基础宽度
-
第一个值：flex-grow（扩展比例）
-
第二个值：flex-shrink（收缩比例）
-
第三个值：flex-basis（基础宽度）
-
-
媒体查询 - 根据屏幕宽度调整布局
这个布局会根据容器宽度自动调整，宽时显示3列，窄时显示2列，非常窄时显示1列。您可以通过顶部的按钮手动切换布局模式。
码道开发者社区，聚焦华为云码道 CodeArts 代码智能体，沉淀 Agent、Skill、鸿蒙开发实战内容，供开发者查阅资料、交流技术、分享工程实践
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)