文章目录
-  
  - 水平均匀分布排列
- 水平非均匀分布排列
- 效果展示
 
水平均匀分布排列
  要实现弹性盒子(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 的两倍。
效果展示


 
                             
                 
                