文章目录
-
- 水平均匀分布排列
- 水平非均匀分布排列
- 效果展示
水平均匀分布排列
要实现弹性盒子（Flexbox）中一行多个 div 平摊排列，可以使用 CSS Flexbox 来布局。这种布局方式可以自动调整每个 div 的宽度，使它们在一行内均匀分布。
实现步骤
- 创建容器：使用
display: flex将父容器设置为弹性容器。 - 子元素均匀分布：使用
flex: 1让每个子元素 (div) 平摊可用空间，使它们在一行内等宽分布。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Equal Width Divs</title>
<style>
.container {
display: flex;
justify-content: space-between; /* 可选：在子元素之间添加间距 */
gap: 10px; /* 可选：在子元素之间添加固定间距 */
}
.container > div {
flex: 1; /* 每个子元素平摊可用空间 */
padding: 20px;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
</div>
</body>
</html>
解释：
.container:
○display: flex; 将容器设置为弹性布局。
○justify-content: space-between; 将子元素平摊在容器内，在每个 div 之间创建均匀的间距。
○gap: 10px; 为子元素之间提供 10 像素的间距（可以根据需要调整或省略）。.container > div:
○flex: 1; 让每个子元素占据相同的空间，使得所有 div 等宽排列。
○padding: 20px; 设置内边距，使内容在每个 div 中有一定的空间。
○background-color: lightblue; 设置背景颜色，用于视觉区分。
效果：
这段代码会在一行中平摊多个 div 元素，并确保它们等宽排列。如果你调整窗口大小，子元素的宽度也会自动调整。
水平非均匀分布排列
要在弹性布局中让第一个 div 占用较少的空间，而其他 div 占用更多的空间，可以通过调整每个 div 的 flex 属性来实现。flex 属性允许你控制每个元素如何分配剩余的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Uneven Width Divs</title>
<style>
.container {
display: flex;
gap: 10px; /* 可选：在子元素之间添加固定间距 */
}
.container > div {
padding: 20px;
background-color: lightblue;
text-align: center;
}
/* 第一个 div 占用较少空间 */
.container > div:first-child {
flex: 1; /* 占用较少空间 */
}
/* 其他 div 占用更多空间 */
.container > div:not(:first-child) {
flex: 2; /* 占用较多空间 */
}
</style>
</head>
<body>
<div class="container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</body>
</html>
解释：
.container > div:first-child:
○ 使用:first-child选择器选择第一个 div 元素。
○flex: 1; 指定第一个 div 占用较少的空间。.container > div:not(:first-child):
○ 使用:not(:first-child)选择器选择除第一个以外的所有 div 元素。
○flex: 2; 指定这些 div 占用更多的空间。flex: 2 意味着这些元素会比第一个元素占用两倍的空间。
工作原理：
● flex: 1 和 flex: 2：flex 属性的值表示元素相对于其他元素应该占据多少剩余空间。在这个示例中，第一个 div 会占用 1 个单位的空间，其他 div 会占用 2 个单位的空间，因此其他 div 的宽度是第一个 div 的两倍。
效果展示
