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

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

news 2026/5/18 1:50:43

弹性盒子模型是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;免费获取高速直连下载地址 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 你是否厌倦了城通网盘那令人抓狂的下载速度&#xff1f;每次下载文件都要面对漫长的等待…...

编程新知 2026/5/17 9:31:15

快速免费解锁网易云音乐NCM格式：ncmdumpGUI完整使用指南

快速免费解锁网易云音乐NCM格式&#xff1a;ncmdumpGUI完整使用指南 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾在网易云音乐下载了心爱的歌曲&am…...

编程新知 2026/5/17 9:26:52

Linuxbonding链路生产排障流程

Linuxbonding链路生产排障流程这是一篇面向中级 Linux 使用者的技术文章&#xff0c;主题聚焦在bonding链路&#xff0c;重点讨论链路聚合、冗余切换和接口状态。在真实生产环境中&#xff0c;bonding链路相关问题往往不会以单一错误形式出现&#xff0c;而是混杂在日志、权限、…...

编程新知 2026/5/17 8:39:23

多智能体的协作成本：沟通开销、上下文膨胀与优化手段

多智能体的协作成本：沟通开销、上下文膨胀与优化手段 1. 标题 (Title) 多智能体系统的协作困境：解析沟通开销与上下文膨胀 从理论到实践：优化多智能体协作成本的完整指南 协作的代价：多智能体系统中的沟通、上下文与优化策略 打破协作壁垒：如何有效降低多智能体系统的运行…...

编程新知 2026/5/17 8:39:09

ncmdumpGUI：3步解决网易云音乐ncm格式播放限制的终极方案

ncmdumpGUI&#xff1a;3步解决网易云音乐ncm格式播放限制的终极方案 【免费下载链接】ncmdumpGUI C#版本网易云音乐ncm文件格式转换&#xff0c;Windows图形界面版本 项目地址: https://gitcode.com/gh_mirrors/nc/ncmdumpGUI 你是否曾经在网易云音乐下载了心爱的歌曲…...

编程新知 2026/5/17 8:06:47

DownKyi技术架构解析：构建高性能B站视频下载引擎的工程实践

DownKyi技术架构解析&#xff1a;构建高性能B站视频下载引擎的工程实践 【免费下载链接】downkyi 哔哩下载姬downkyi&#xff0c;哔哩哔哩网站视频下载工具&#xff0c;支持批量下载&#xff0c;支持8K、HDR、杜比视界&#xff0c;提供工具箱&#xff08;音视频提取、去水印等&…...

编程新知 2026/5/17 7:23:33

基于意图与技能解耦的智能对话系统构建指南

1. 项目概述&#xff1a;一个意图与技能驱动的AI对话引擎最近在折腾AI应用开发&#xff0c;特别是对话型AI助手时&#xff0c;发现一个核心痛点&#xff1a;如何让AI不仅能理解用户说了什么&#xff08;意图识别&#xff09;&#xff0c;还能精准地调用相应的功能&#xff08;技…...

编程新知 2026/5/17 6:01:46

基于GitHub Actions的自动化代码质量守护：CodeBuddy实战指南

1. 项目概述与核心价值最近在和一些团队做代码评审和协作时&#xff0c;我经常遇到一个痛点&#xff1a;大家写的代码风格各异&#xff0c;注释要么缺失要么过时&#xff0c;一些潜在的安全漏洞和性能问题在提交前很难被系统性地发现。虽然市面上有各种静态分析工具&#xff0c…...

编程新知 2026/5/17 5:23:25

Claude API钩子框架设计：非侵入式中间件与生命周期管理实践

1. 项目概述与核心价值最近在折腾一些AI应用开发&#xff0c;发现一个挺有意思的现象&#xff1a;很多开发者想给Claude API的调用过程加点“料”&#xff0c;比如在请求发出前或收到响应后&#xff0c;自动执行一些自定义逻辑。可能是为了日志记录、数据清洗、请求重试&#x…...

编程新知 2026/5/17 4:27:28

韩国市场合规语音交付迫在眉睫！ElevenLabs韩文生成必须配置的4项GDPR+KCC隐私开关

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;韩国市场语音AI合规落地的紧迫性与战略意义 韩国《个人信息保护法》&#xff08;PIPA&#xff09;于2023年修订后&#xff0c;明确将语音生物特征数据列为“敏感信息”&#xff0c;要求语音AI系统在采集…...

编程新知 2026/5/17 3:35:31