实现弹性盒子(Flexbox)中一行多个 div 平摊排列

简介: 这篇文章介绍了如何使用CSS Flexbox布局来实现一行内多个div的自动平摊排列,包括水平均匀分布和非均匀分布排列的方法,并提供了相应的HTML和CSS代码示例。

文章目录

    • 水平均匀分布排列
    • 水平非均匀分布排列
    • 效果展示

水平均匀分布排列

  要实现弹性盒子(Flexbox)中一行多个 div 平摊排列,可以使用 CSS Flexbox 来布局。这种布局方式可以自动调整每个 div 的宽度,使它们在一行内均匀分布。

实现步骤

  1. 创建容器:使用 display: flex 将父容器设置为弹性容器。
  2. 子元素均匀分布:使用 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>

解释:

  1. .container:
    display: flex; 将容器设置为弹性布局。
    justify-content: space-between; 将子元素平摊在容器内,在每个 div 之间创建均匀的间距。
    gap: 10px; 为子元素之间提供 10 像素的间距(可以根据需要调整或省略)。
  2. .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>

解释:

  1. .container > div:first-child:
    ○ 使用 :first-child 选择器选择第一个 div 元素。
    flex: 1; 指定第一个 div 占用较少的空间。
  2. .container > div:not(:first-child):
    ○ 使用 :not(:first-child) 选择器选择除第一个以外的所有 div 元素。
    flex: 2; 指定这些 div 占用更多的空间。flex: 2 意味着这些元素会比第一个元素占用两倍的空间。

工作原理:
flex: 1flex: 2flex 属性的值表示元素相对于其他元素应该占据多少剩余空间。在这个示例中,第一个 div 会占用 1 个单位的空间,其他 div 会占用 2 个单位的空间,因此其他 div 的宽度是第一个 div 的两倍。

效果展示

在这里插入图片描述

在这里插入图片描述

相关文章
|
前端开发
前端跳转链接报错403的原因以及解决方案
前端跳转链接报错403的原因以及解决方案
1799 1
|
Java 数据库连接 数据库
探究Java中的MyBatis Plus注解 @TableField:灵活处理字段映射与自动填充
在数据库操作中,字段映射和字段填充是开发者经常需要处理的问题。MyBatis Plus作为一款优秀的ORM框架,提供了注解 `@TableField`,能够帮助开发者更加灵活地处理字段映射,以及在特定场景下实现自动填充功能。本文将深入探讨 `@TableField` 注解的用法及其在持久层开发中的应用。
5552 1
|
12月前
|
搜索推荐
uview下拉菜单Dropdown整合个性化下拉
uview下拉菜单Dropdown整合个性化下拉
441 5
|
JavaScript 前端开发
JS之url进行编码和解码(三种方式)
JS之url进行编码和解码(三种方式)
19556 2
|
12月前
|
缓存 网络安全 开发工具
全面掌握 Git 和 Gitee:从安装到上传的完整指南
本文档介绍了如何安装和配置Git,以及如何与Gitee进行连接。首先从官网下载Git并安装,接着配置用户名和邮箱,生成SSH密钥并将其添加到Gitee账户,完成无密码登录的设置。文档还提供了基本的命令使用指南,包括文件操作、Git命令和gitee代码上传流程,最后讲解了提交信息的规范格式和回滚操作的方法。
1196 1
|
12月前
|
Java Shell 应用服务中间件
Mac系统下配置环境变量:Javajdk、maven、tomcat 环境变量配置及对应配置文件
这篇文章介绍了如何在Mac系统下配置Java JDK、Maven和Tomcat的环境变量,包括配置文件的选择、解决环境变量在zsh shell中无效的问题、查看和设置系统环境变量的方法,以及JDK和Maven的下载、配置和测试步骤。
4864 1
Mac系统下配置环境变量:Javajdk、maven、tomcat 环境变量配置及对应配置文件
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
9376 120
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
2959 0
|
12月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3963 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用