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

css弹性盒子——flex布局

news 2025/6/20 15:15:31

目录

​编辑

一、flex容器的样式属性(父元素属性)

 display:flex  弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

justify-content

二、flex元素的样式属性(子元素属性)

1.flex-grow

 2.flex-shrink

3.flex-basis

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

5.order

6.align-self 单独控制某个元素

一、flex容器的样式属性(父元素属性)

 display:flex  弹性盒子，实现水平排列,在父盒子设置，适用于单行/单列

默认子盒子宽高度超过父盒子时，按父盒子宽高度均分，再多则会溢出

flex和上面的block，inline，inline-block并列， display只能设置一个属性，display和float不能出现在同一个盒子的属性里。

flex-direction: column;flex-wrap:wrap;  等于 flex-flow: row wrap;

使用F12可快速调试各属性的页面效果 

justify-content

justify-content:space-evenly; 

justify-content:space-between;

 justify-content: space-around;两侧的空间是中间元素间隔空间的一半 

stretch(默认值)

align-items:baseline;

二、flex元素的样式属性(子元素属性)

1.flex-grow

单个盒子范围0~1 延伸至剩余空间的0~1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div{width: 100px;height: 100px;background-color: pink;flex-grow: 0.6;}</style>
</head>
<body><div class="box"><div>1</div></div>
</body>
</html>

多个子盒子设置超过1时，剩余空间分成n份

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;flex-grow: 3;}.box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 2;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div></div>
</body>
</html>

 2.flex-shrink

收缩超出部分的0~1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 600px;height: 100px;background-color: pink;flex-shrink: 0.5;}/* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;} */</style>
</head>
<body><div class="box"><div>1</div><!-- <div>2</div> --></div>
</body>
</html>

3.flex-basis

设置主轴初始尺寸，0%(不起作用)，n px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 500px;background-color: skyblue;display: flex;}.box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;/* flex-shrink: 0.5; */flex-basis: 200px;}/* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 0.5;} */</style>
</head>
<body><div class="box"><div>1</div><!-- <div>2</div> --></div>
</body>
</html>

4.flex组合属性 flex:flex-grow flex-shrink flex-basis；

flex:1;  表示1 1 0%

flex:0.5; 表示0.5 1 0%

5.order

顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 500px;background-color: skyblue;display: flex;/* flex-direction: column; */}.box div{width: 100px;height: 100px;background-color: pink;border: 1px solid black;}.box div:nth-of-type(1){order:1;}.box div:nth-of-type(1){order:-1;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

6.align-self 单独控制某个元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-grow</title><style>.box{width: 500px;height: 300px;background-color: skyblue;display: flex;/* flex-direction: column; */}/* .box div:nth-of-type(1){width: 100px;height: 100px;background-color: pink;flex-shrink: 0.5;flex-basis: 200px;flex:1;} *//* .box div:nth-of-type(2){width: 200px;height: 100px;background-color: green;flex-grow: 0.5;} */.box div{width: 100px;height: 100px;background-color: pink;border: 1px solid black;}/* .box div:nth-of-type(1){order:1;} */.box div:nth-of-type(4){align-self: flex-end;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
</body>
</html>

相关文章：

css弹性盒子——flex布局

目录 ​编辑 一、flex容器的样式属性(父元素属性) display:flex 弹性盒子&#xff0c;实现水平排列,在父盒子设置&#xff0c;适用于单行/单列 justify-content 二、flex元素的样式属性(子元素属性) 1.flex-grow 2.flex-shrink 3.flex-basis 4.flex组合属性 flex:flex-…...

编程日记 2024/9/6 12:43:33

亚马逊云科技 Gen BI 2024-09-04 上海站QuickSight

机缘 我又来了&#xff0c;感觉不上班比上班还要忙 天天像特种工一天&#xff0c;今天有度过的充实的一天&#xff0c;上午去图书馆&#xff0c;下午去了 亚马逊云科技 Gen BI 技术体验日 。 具体照片可以去 这里看 哈哈&#xff0c;这个就是我了 商业智能的趋势 根据艾瑞咨…...

编程日记 2024/9/6 12:42:33

【Qt】Qt和JavaScript使用QWebChannel交互

问题 问题一&#xff1a; 问题描述&#xff1a;运行时&#xff0c;Qt向Js端发送消息没有问题&#xff0c;Js端向Qt端发送消息时失败 报错&#xff1a;Cannot invoke unknown method of index -1 on object webTransport(0x…) 原因及解决办法&#xff1a;使用Qt 5.11.2编译生…...

编程日记 2024/9/6 12:39:30

码住！15个爆好用知识库软件工具分享

市场趋势&#xff1a;全球知识库管理软件的市场规模发展速度非常快&#xff0c;并且未来几年内仍将继续保持增长。据Verified Market Research预测&#xff0c;2028年知识库管理软件的全球市场份额将增长到588.1亿美元&#xff0c;复合年增长率达12.67%。 知识库软件可以帮助企…...

编程日记 2024/9/6 12:38:29

MybatisPlus中@EnumValue注解介绍、应用场景和示例代码

EnumValue注解详细介绍 功能概述&#xff1a; EnumValue注解标记在枚举类型的字段上&#xff0c;表示该字段是枚举值在数据库中存储的实际值。这对于枚举的持久化是关键&#xff0c;确保枚举在数据库中的表示与Java枚举类的一致性。 主要用途&#xff1a; 字段指定&#xff1a;…...

编程日记 2024/9/6 12:36:27

【计算机网络】描述TCP建立连接与断开的过程

一、TCP连接的建立与断开 1、建立连接——三次握手 1、A的TCP向B发出连接请求报文段 其首部中的同步位SYN 1&#xff0c;并选择序号seq x&#xff0c;表明传送数据时的第一个数据字节的序号是 x 2、B的TCP收到连接请求报文段后&#xff0c;如同意&#xff0c;则发回确认。 B …...

编程日记 2024/9/6 12:35:26

CSS学习14[重点]

定位 前言一、定位二、定位模式1. 静态定位 static2. 相对定位 relative3. 绝对定位 absolute4. 子绝父相5. 绝对定位的盒子水平居中 6. 固定定位&#xff08;fixed&#xff09;7. 叠放次序&#xff08;z&#xff09;三、四种定位总结四、定位模式转换 前言 为什么学习定位&am…...

编程日记 2024/9/6 12:32:23

力扣 | 递归 | 区间上的动态规划 | 486. 预测赢家

文章目录 一、递归二、区间动态规划 LeetCode&#xff1a;486. 预测赢家 一、递归 注意到本题数据范围为 1 < n < 20 1<n<20 1<n<20&#xff0c;因此可以使用递归枚举选择方式&#xff0c;时间复杂度为 2 20 1024 ∗ 1024 1048576 1.05 1 0 6 2^{20…...

编程日记 2024/9/6 12:31:23

黑白格

题目描述 小杨有一个 n 行 m 列的网格图&#xff0c;其中每个格子要么是白色&#xff0c;要么是黑色。 小杨想知道至少包含 k 个黑色格子的最小子矩形包含了多少个格子。 输入格式 第一行包含三个正整数 n,m,k&#xff0c;含义如题面所示。 之后 n 行&#xff0c;每行⼀个…...

编程日记 2024/9/6 12:29:21

数据链路层（MAC地址）

文章目录 数据链路层&#xff08;MAC地址&#xff09;1、以太网2、以太网帧格式3、MAC地址4、对比理解 MAC 地址和 IP 地址5、最大传输单元&#xff08;MTU&#xff09;6、MTU 对 IP 协议的影响7、MTU 对 UDP 协议的影响8、MTU 对 TCP 协议的影响9、查看硬件地址和 MTU10、ARP …...

编程日记 2024/9/6 12:28:20

【ruby java】登陆功能/邮件发送模版240903

Rails 风格登录系统添加全面而详细的注释&#xff0c;解释每个部分的功能和用途。​​​​​​​​​ 详细注释&#xff0c;解释了每个文件和代码块的功能。以下是一些关键点的总结&#xff1a; 1. 控制器&#xff08;Controllers&#xff09;: - ApplicationController: …...

编程日记 2024/9/6 12:26:17

告别格式不兼容烦恼！ape转换mp3，分享3个简单方法

各位读者们&#xff0c;你们是否有过这种体验&#xff1a;满怀期待地在网上下载一首好听的歌曲&#xff0c;结果怎么点击手机都播放不了&#xff0c;定睛一看&#xff0c;弹窗显示“无法播放该音频文件”。这是为什么呢&#xff1f;原来那首歌的音频格式是ape&#xff0c;不被手…...

编程日记 2024/9/6 12:24:16

Java核心知识体系-并发与多线程：线程基础

1 先导 Java线程基础主要包含如下知识点&#xff0c;相信我们再面试的过程中&#xff0c;经常会遇到类似的提问。 1、线程有哪几种状态? 线程之间如何转变&#xff1f; 2、线程有哪几种实现方式? 各优缺点&#xff1f; 3、线程的基本操作&#xff08;线程管理机制&#xff…...

编程日记 2024/9/6 12:23:15

KRaft模式下的Kafka启动指南：摆脱Zookeeper依赖

一、背景介绍 多年来&#xff0c;人们一直在同时使用Apache ZooKeeper和Apache Kafka。但是自Apache Kafka 3.3发布以来&#xff0c;它就可以在没有ZooKeeper的情况下运行。同时它包含了新的命令kafka-metadata-quorum和kafka-metadata-shell?该如何安装新版kafka&#xff0c…...

编程日记 2024/9/6 12:22:13

【数据库】MySQL-基础篇-函数

专栏文章索引&#xff1a;数据库 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、简介 二、字符串函数 三、数值函数 四、日期函数 五、流程函数 一、简介 函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着&#xff0c;这一段程序或代码在 M…...

编程日记 2024/9/6 12:20:12

dp练习【4】

最长数对链 646. 最长数对链 给你一个由 n 个数对组成的数对数组 pairs &#xff0c;其中 pairs[i] [lefti, righti] 且 lefti < righti 。 现在&#xff0c;我们定义一种 跟随 关系&#xff0c;当且仅当 b < c 时&#xff0c;数对 p2 [c, d] 才可以跟在 p1 [a, b…...

编程日记 2024/9/6 12:16:08

php 实现推荐算法

在PHP中实现推荐算法的应用场景通常包括电商、社交媒体、内容平台等。推荐算法可以帮助用户找到与其兴趣相关的内容&#xff0c;提高用户体验和平台黏性。以下是几种常见的推荐算法及其PHP实现方式&#xff1a; 1. 基于协同过滤的推荐算法 协同过滤&#xff08;Collaborative…...

编程日记 2024/9/6 12:15:07

相机光学（三十六）——光圈

0.参考链接 &#xff08;1&#xff09;Hall光圈和Piris光圈的区别 &#xff08;2&#xff09;自动光圈及P-IRIS原理 1.光圈分类 Hall光圈和Piris光圈是两种不同的光圈技术。它们之间的区别如下&#xff1a; Hall光圈&#xff1a;Hall光圈是一种传统的光电子元件&#xff0c;通…...

编程日记 2024/9/6 12:13:05

数据结构——树和二叉树

目录 一、树的概念 二、树结点之间的关系 三、二叉树 1、满二叉树 2、完全二叉树 四、二叉树的存储 1、顺序存储 2、链式存储 一、树的概念 如果数据和数据之间满足一对多的关系&#xff0c;将其逻辑结构称之为树 如下图&#xff1a;树的根与树的分支存在一对多的关系 将上…...

编程日记 2024/9/6 12:07:59

142. Go操作Kafka（confluent-kafka-go库）

文章目录 Apache kafka简介开始使用Apache Kafka构建生产者构建消费者 总结 之前已经有两篇文章介绍过 Go如何操作 kafka 28.windows安装kafka&#xff0c;Go操作kafka示例&#xff08;sarama库&#xff09; 51.Go操作kafka示例&#xff08;kafka-go库&#xff09; Apache ka…...

编程日记 2024/9/6 12:06:59

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/6/18 2:20:36

云计算——弹性云计算器（ECS）

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

编程新知 2025/6/18 4:36:16

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/16 23:07:15

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/6/17 22:16:11

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/6/20 1:28:49

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

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

编程新知 2025/6/15 18:27:41

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/6/17 2:00:03

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

编程新知 2025/6/20 10:02:46

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...

编程新知 2025/6/17 5:00:06

归并排序：分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

编程新知 2025/6/20 10:04:49