实现弹性盒子(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>
AI 代码解读

解释:

  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>
AI 代码解读

解释:

  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 的两倍。

效果展示

在这里插入图片描述

在这里插入图片描述

目录
打赏
0
2
2
0
229
分享
相关文章
前端跳转链接报错403的原因以及解决方案
前端跳转链接报错403的原因以及解决方案
1510 1
|
9月前
|
uview下拉菜单Dropdown整合个性化下拉
uview下拉菜单Dropdown整合个性化下拉
286 5
学校不教,工作需要!!!程序员需要掌握的常见Linux命令,掌握可以让工作效率翻倍!!
这篇文章列出了程序员在Linux环境下提高工作效率所需要掌握的常见命令,包括文件操作、系统监控、网络配置、进程管理等,并提供了一些实用技巧和快捷键。
【若依Java】15分钟玩转若依二次开发,新手小白半小时实现前后端分离项目,springboot+vue3+Element Plus+vite实现Java项目和管理后台网站功能
摘要: 本文档详细介绍了如何使用若依框架快速搭建一个基于SpringBoot和Vue3的前后端分离的Java管理后台。教程涵盖了技术点、准备工作、启动项目、自动生成代码、数据库配置、菜单管理、代码下载和导入、自定义主题样式、代码生成、启动Vue3项目、修改代码、以及对代码进行自定义和扩展,例如单表和主子表的代码生成、树形表的实现、商品列表和分类列表的改造等。整个过程详细地指导了如何从下载项目到配置数据库,再到生成Java和Vue3代码,最后实现前后端的运行和功能定制。此外,还提供了关于软件安装、环境变量配置和代码自动生成的注意事项。
17138 65
Rust语言入门:安全性与并发性的完美结合
【10月更文挑战第25天】Rust 是一种系统级编程语言,以其独特的安全性和并发性保障而著称。它提供了与 C 和 C++ 相当的性能,同时确保内存安全,避免了常见的安全问题。Rust 的所有权系统通过编译时检查保证内存安全,其零成本抽象设计使得抽象不会带来额外的性能开销。Rust 还提供了强大的并发编程工具,如线程、消息传递和原子操作,确保了数据竞争的编译时检测。这些特性使 Rust 成为编写高效、安全并发代码的理想选择。
156 0
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
使用uniapp开发微信小程序的人脸采集功能/人脸识别功能
2797 0
软件测试:Postman 工具的使用。开发及测试均需要掌握的测试工具
这篇文章详细介绍了Postman工具的各个模块功能,包括创建请求、集合、环境、自动化测试等,并解释了如何使用Postman进行GET、POST、PUT和DELETE等常见HTTP请求的测试。
报错:Cannot read properties of undefined (reading ‘$message‘)解决方法
以上就是解决"Cannot read properties of undefined (reading ‘$message‘)"错误的几种方法,希望对你有所帮助。
5642 0
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问