当前位置： 首页 > news >正文

CSS的弹性盒子模型（Flex box)

news 2025/9/20 3:32:57

弹性盒子模型是CSS3的一种新的布局模式，弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式，引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。

  弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item）组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器，弹性容器包含了一个或多个弹性子元素。

注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只是定义了弹性子元素如何在弹性容器内布局。

display属性

开启弹性盒子

   display: flex;
未开启弹性盒子如下
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.continer{width: 500px;height: 500px;background-color: aquamarine;}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: green;}.box3{width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="continer"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>

 

 开启弹性盒子

flex-direction属性

指定弹性子元素在父容器中的位置

row: 横向从左到右排列（左对齐），这是默认排列方式。

row-reverse:反转横向排列（右对齐，从后往前排列，最后一项排在最前面）

column:纵向排列

colimn-reverse:反转纵向排列

   flex-direction: row-reverse;

 

 flex-direction:column;

 

 flex-direction:column-reverse;

  

justify-content属性 

 内容对齐属性，应用在弹性容器上，把弹性项沿着弹性容器的株洲县对齐。

flex-start: 弹性项向行头紧挨着，这个是默认值。

flex-end:弹性项向行尾紧挨着填充。

center: 弹性项居中紧挨着。（如果剩余的自由空间是负的，则弹性项将在两个方向上同时溢出）

     justify-content: flex-end;

 

justify-content: center;

 

align-items属性

设置或检索弹性盒子子元素在侧轴（纵轴）上的对齐方式。

flex-start:弹性盒子子元素的侧轴（纵轴）起始位置的边界靠住的纵轴其实边界。

flex-end: 弹性盒子子元素的侧轴（纵轴）起始位置的边界靠住的该行纵轴其实边界。

center:弹性盒子元素在该行的侧轴（纵轴）上居中的位置。（如果该行的尺寸小于弹性盒子的尺寸，则会向两个方向溢出相同的长度）。

     align-items: flex-start;

 

 align-items: flex-end;

 

 align-items: center;

 

 flex-grow 或flex属性（用于子元素）

根据弹性盒子元素所设置的扩展因子做为比率来分配剩余空间，默认为0。即如果存在剩余空间也不会放大。如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间，0.1即为10%，1为100%，超出按100%计算。

    <style>.continer{width: 500px;height: 500px;background-color: aquamarine;display: flex;}.box1{width: 100px;height: 100px;background-color: red;flex: 0.3;}.box2{width: 100px;height: 100px;background-color: green;flex: 0.3;}.box3{width: 100px;height: 100px;background-color: blue;flex: 0.4;}</style>
</head>
<body><div class="continer"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div>
</body>

 

 

 

 

相关文章：

CSS的弹性盒子模型（Flex box)

弹性盒子模型是CSS3的一种新的布局模式&#xff0c;弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式&#xff0c;引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列&#xff0c;对齐和分配空白空间。 弹性盒子由弹性容…...

编程日记 2024/9/27 22:37:03

django drf 分页器

自定义分页器代码&#xff1a; from django.core.paginator import InvalidPage from django.core.paginator import Paginator as DjangoPaginator from django.utils.functional import cached_property from rest_framework.exceptions import NotFound from rest_framewor…...

编程日记 2024/9/27 22:36:01

SpringBoot整合JPA实现CRUD详解

SpringBoot版本是2.0以上(2.6.13) JDK是1.8 一、依赖 <dependencies><!-- jdbc --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jdbc</artifactId></dependency><!--…...

编程日记 2024/9/27 22:33:59

干部画像——精准辅助干部选拔的核心利器

干部画像&#xff0c;作为现代干部管理体系中的一项重要创新&#xff0c;已逐步成为精准辅助干部选拔的核心利器。通过综合运用多维度信息收集、系统化整理与科学化分析的方法&#xff0c;全面、客观、真实地勾勒出每位干部的综合素质与能力画像&#xff0c;为干部选拔工作提供…...

编程日记 2024/9/27 22:31:56

linux网络编程9

24.9.26学习目录 一.Web编程1.Javascript3.CGI 一.Web编程 1.Javascript 是一种基于对象并具有安全性能的脚本语言&#xff0c;是由浏览器内解释器翻译成可执行格式后执行&#xff1b; 即是网页与用户完成各种交互动作&#xff1b; 特点&#xff1a;基于对象的语言、简单性、…...

编程日记 2024/9/27 22:30:55

RabbitMQ应用

RabbitMQ 共提供了7种⼯作模式, 进⾏消息传递 一、七种模式的概述 1、Simple(简单模式) P&#xff1a;生产者&#xff0c;就是发送消息的程序 C&#xff1a;消费者&#xff0c;就是接收消息的程序 Queue&#xff1a;消息队列&#xff0c;类似⼀个邮箱, 可以缓存消息; ⽣产者…...

编程日记 2024/9/27 22:29:54

大数据Flink（一百二十四）：案例实践——淘宝母婴数据加速查询

文章目录 案例实践——淘宝母婴数据加速查询 一、​​​​​​​创建数据库表并导入数据 二、​​​​​​​​​​​​​​创建session集群 三、​​​​​​​​​​​​​​源表查询 四、​​​​​​​​​​​​​​指标计算 案例实践——淘宝母婴数据加速查询 随着…...

编程日记 2024/9/27 22:28:53

无限大薄板的电场

单块无限大薄板两端的电场 单块无限大的薄板&#xff0c;如果上面带有均匀分布的电荷&#xff0c;就会在薄板的两侧产生电场&#xff0c;电场大小与距离平板的位置无关&#xff0c;方向与平板垂直&#xff0c;如果平板带正电荷&#xff0c;则电场方向向外指向两侧&#xff0c;…...

编程日记 2024/9/27 22:26:51

外包干了1个多月，技术明显退步了。。。。。

回望过去&#xff0c;我是一名普通的本科生&#xff0c;2019年有幸通过校园招聘踏入了广州一家软件公司的大门&#xff0c;成为了一名功能测试工程师。岁月如梭&#xff0c;转眼间&#xff0c;我已在这个岗位上默默耕耘了近四年。起初&#xff0c;我对这份工作充满了热情与期待…...

编程日记 2024/9/27 22:25:50

芝法酱学习笔记（0.4）——SpringBoot多模块项目打包，resource分离，lib分离，启动脚本

前言 上期讲了如何在windows平台搭建Java后端的开发环境&#xff0c;并给出了一个简单的hello world级别的多模块代码示例。但上期仅仅是在IDEA中运行&#xff0c;和正式的生产环境完全不同。 本期将讲解&#xff0c;如何配置SpringBoot多模块项目的maven打包&#xff0c;并分…...

编程日记 2024/9/27 22:24:48

进程（一万字学习笔记）

------------------------本文为学习进程记录的学习笔记&#xff0c;如有问题欢迎指正 -------------------------- 目录 1.定义 2.进程的种类 2.进程的内存布局 3.进程控制块&#xff08;PCB&#xff09; 4.进程源语 fork() 写时复制 exec() execl函数 wait() #进…...

编程日记 2024/9/27 22:20:45

Docker实践与应用：深度探索与丰富案例

一、引言 在当今的软件开发和运维领域&#xff0c;Docker已经成为了一种不可或缺的技术。它以容器化的方式改变了软件的开发、部署和运行模式&#xff0c;为企业和开发者带来了前所未有的便利和效率提升。本文将深入探讨Docker的实践操作以及丰富的应用举例&#xff0c;带您全面…...

编程日记 2024/9/27 22:19:44

信息安全工程师（21）安全协议

前言 安全协议是建立在密码体制基础上的一种交互通信协议&#xff0c;它运用密码算法和协议逻辑来实现认证、密钥分配、数据机密性、完整性和抗否认性等安全目标。 一、定义与目的 安全协议旨在确保网络环境中信息交换的安全性&#xff0c;通过密码技术和协议逻辑来保护数据的机…...

编程日记 2024/9/27 22:18:43

Starrocks with 嵌套

在某些场景下需要进行 with 嵌套 需要以下进行处理&#xff0c;报如图错误 with abc as (select * from .. ) insert into xxx select * from abc尝试创建物化视图 CREATE MATERIALIZED VIEW IF NOT EXISTS ads_test.xxx_mv REFRESH DEFERRED MANUAL AS with abc as (select…...

编程日记 2024/9/27 22:17:42

ubuntu 安装neo4j

在Ubuntu上安装Neo4j的步骤如下&#xff1a; 1.更新包管理器的索引列表&#xff1a; sudo apt update 2.导入Neo4j的GPG密钥&#xff1a; wget -O - https://debian.neo4j.org/neotechnology.gpg.key | sudo apt-key add - 3.添加Neo4j的仓库到APT源列表&#xff1a; ech…...

编程日记 2024/9/27 22:15:40

云计算课程作业1

作业1 Xmanager连接 rhel连接 作业2 首先确认你的虚拟机设置的是NAT 1-3 然后打开这篇blog&#xff0c;并完成第一步和第二步 因为我们是NAT&#xff0c;所以不需要连接网桥&#xff0c;即跳过第三步&#xff0c;但是这里ping一下测试网络连接 2- 如果到这里你发现提示yum…...

编程日记 2024/9/27 22:14:39

建筑智能，推动智慧社区发展

建筑智能已经成为现代城市建设的热门词汇。它不仅是提高城市建筑现代化水平的必由之路&#xff0c;也是未来城市智能化的重要标志。其中&#xff0c;智能社区是建筑智能化的重要环节之一。 智能社区是指以信息技术为基础&#xff0c;通过信息技术实现社区设施设备网络化、监管…...

编程日记 2024/9/27 22:11:36

conda 虚拟环境安装GDAL

一. 背景 换了新电脑&#xff0c;要重新安装GDAL。从前是下了GDAL的.wheel文件用pip安装&#xff0c;但平时下轮子的网站现在都打不开&#xff0c;比如https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal&#xff0c;不晓得为什么。 后面看了这篇教程解决了问题&#xff08;h…...

编程日记 2024/9/27 22:10:35

STM32转AT32代码转换

1. 引言 在嵌入式开发中&#xff0c;我们经常会遇到更换单片机芯片的事情&#xff0c;若芯片是同一厂家的还好说&#xff0c;若是不同厂家的则需要重新写&#xff0c;重新调&#xff0c;重新去学习其底层驱动程序&#xff0c;比较费时费力。如&#xff1a;ST32转AT32、ST32转G…...

编程日记 2024/9/27 22:06:31

vue中怎么覆盖 sytle中的样式

好的&#xff0c;下面是一个具体的例子&#xff0c;展示如何在 Vue 组件中覆盖样式。 示例&#xff1a;覆盖组件样式 假设我们有一个组件 MyComponent.vue&#xff0c;其中包含一些样式&#xff1a; <template><div class"my-component"><h1>标…...

编程日记 2024/9/27 22:05:30

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2025/9/15 23:48:19

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/9/7 12:10:26

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/9/1 7:30:10

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/8/14 14:59:56

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/8/26 22:46:30

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/9/19 3:30:35

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/8/7 21:07:39

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2025/9/19 18:01:14

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/9/19 7:10:44

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/9/9 22:50:58