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

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

news 2025/7/13 0:40:14

弹性盒子模型是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

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/7/11 2:21:39

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/7/12 20:53:34

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/7/12 13:09:37

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/7/12 5:04:24

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/6/20 15:14:31

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/7/11 1:13:22

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/7/7 5:46:30

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/7/6 11:26:45

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/9 14:50:22