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

第十三讲_css 伸缩盒模型flex

news 2025/9/16 22:41:28

css 伸缩盒模型flex

  • 1. 伸缩盒模型介绍
  • 2. 伸缩盒模型的主轴方向
  • 3. 伸缩盒模型的主轴换行
  • 4. 主轴上的对齐方式
  • 5. 侧轴上对齐方式
    • 5.1 一行的侧轴上对齐方式
    • 5.2 多行的侧轴上对齐方式
  • 6. 伸缩项目的伸缩性
    • 6.1 伸缩项目在主轴上的基准长度
    • 6.2 伸缩项目的放大
    • 6.3 伸缩项目的缩小
  • 7. flex 复合属性
  • 8. 伸缩项目排序

1. 伸缩盒模型介绍

  • 伸缩盒模型由伸缩容器和伸缩项目组成。
  • 将元素的display设置为flex，元素就变成了一个伸缩容器，其子元素自动变为伸缩项目（不包括孙子元素）。
  • 无论原来是什么元素，变成伸缩项目后，都会变成块元素。
<html><style>.outer {/* 设置为伸缩容器，其子元素自动变成伸缩项目，不包括孙子元素 */display: flex;}.inner {/* 变成伸缩项目后，可以设置宽高 */width: 500px;height: 100px;background-color: red;text-align: center;line-height: 100px;}</style><div class="outer"><span class="inner">我是一个行内元素</span></div>
</html>

2. 伸缩盒模型的主轴方向

伸缩盒模型的主轴，默认是横向的、从左到右，伸缩项目沿着主轴排列。

伸缩盒模型的侧轴，垂直于主轴。

通过flex-direction可以设置主轴的方向：

  • row：主轴横向、从左到右（默认值）
  • row-reverse：主轴横向、从右到左
  • column：主轴纵向、从上到下
  • column-reverse：主轴纵向、从下到上
<html><style>.outer1,.outer2,.outer3,.outer4 {border: 1px black solid;margin: 10px;}.outer1 {display: flex;}.outer2 {display: flex;flex-direction: row-reverse;}.outer3 {display: flex;flex-direction: column;}.outer4 {display: flex;flex-direction: column-reverse;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;}.inner1 {background-color: red;}.inner2 {background-color: green;}.inner3 {background-color: blue;}</style><div class="outer1"><div class="inner1 box">row</div><div class="inner2 box">row</div><div class="inner3 box">row</div></div><div class="outer2"><div class="inner1 box">row-reverse</div><div class="inner2 box">row-reverse</div><div class="inner3 box">row-reverse</div></div><div class="outer3"><div class="inner1 box">column</div><div class="inner2 box">column</div><div class="inner3 box">column</div></div><div class="outer4"><div class="inner1 box">column-reverse</div><div class="inner2 box">column-reverse</div><div class="inner3 box">column-reverse</div></div>
</html>

3. 伸缩盒模型的主轴换行

伸缩项目沿着主轴排列，默认是不换行的。通过flex-wrap可以设置：

  • nowrap：不换行（默认值）
  • wrap：换行
  • wrap-reverse：反向换行
<html><style>.outer1,.outer2,.outer3,.outer4 {width: 200px;border: 1px black solid;margin: 10px;}.outer1 {display: flex;}.outer2 {display: flex;flex-wrap: wrap;}.outer3 {display: flex;flex-wrap: wrap-reverse;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;}.inner1 {background-color: red;}.inner2 {background-color: green;}.inner3 {background-color: blue;}</style><div class="outer1"><div class="inner1 box">nowrap</div><div class="inner2 box">nowrap</div><div class="inner3 box">nowrap</div></div><div class="outer2"><div class="inner1 box">wrap</div><div class="inner2 box">wrap</div><div class="inner3 box">wrap</div></div><div class="outer3"><div class="inner1 box">wrap-reverse</div><div class="inner2 box">wrap-reverse</div><div class="inner3 box">wrap-reverse</div></div>
</html>

4. 主轴上的对齐方式

伸缩项目沿着主轴排列，在主轴上的对齐方式可以通过justify-content设置：

  • flex-start：主轴起点对齐（默认值）
  • flex-end：主轴尾部对齐
  • center：主轴上居中对齐
  • space-between：主轴上均匀分布，两端对齐
  • space-around：主轴上均匀分布，两端距离是中间的一半
  • space-evenly：主轴上均匀分布，两端距离和中间的一样
<html><style>.outer1,.outer2,.outer3,.outer4,.outer5,.outer6 {border: 1px black solid;margin: 10px;display: flex;}.outer1 {justify-content: flex-start;}.outer2 {justify-content: center;}.outer3 {justify-content: flex-end;}.outer4 {justify-content: space-between;}.outer5 {justify-content: space-around;}.outer6 {justify-content: space-evenly;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;}.inner1 {background-color: red;}.inner2 {background-color: green;}.inner3 {background-color: blue;}</style><div class="outer1"><div class="inner1 box">flex-start;</div><div class="inner2 box">flex-start;</div><div class="inner3 box">flex-start;</div></div><div class="outer2"><div class="inner1 box">center</div><div class="inner2 box">center</div><div class="inner3 box">center</div></div><div class="outer3"><div class="inner1 box">flex-end</div><div class="inner2 box">flex-end</div><div class="inner3 box">flex-end</div></div><div class="outer4"><div class="inner1 box">space-between</div><div class="inner2 box">space-between</div><div class="inner3 box">space-between</div></div><div class="outer5"><div class="inner1 box">space-around</div><div class="inner2 box">space-around</div><div class="inner3 box">space-around</div></div><div class="outer6"><div class="inner1 box">space-evenly</div><div class="inner2 box">space-evenly</div><div class="inner3 box">space-evenly</div></div>
</html>

5. 侧轴上对齐方式

5.1 一行的侧轴上对齐方式

如果伸缩项目只有一行，在侧轴上的对齐方式可以通过align-items设置：

  • flex-start：侧轴起点对齐
  • flex-end：侧轴尾部对齐
  • center：侧轴上居中对齐
  • baseline：侧轴上文本基线对齐
  • stretch：侧轴上拉伸到整个父容器（默认值）（ps：如果侧轴是纵向的，伸缩项目不能设置height；如果侧轴是横向，伸缩项目不能设置witch。否则无效）
<html><style>.outer1,.outer2,.outer3,.outer4,.outer5 {border: 1px black solid;margin: 10px;display: flex;height: 200px;}.outer1 {align-items: flex-start;}.outer2 {align-items: center;}.outer3 {align-items: flex-end;}.outer4 {align-items: baseline;}.outer5 {align-items: stretch;}.box {width: 100px;}.inner1 {height: 50px;background-color: red;}.inner2 {height: 100px;background-color: green;}.inner3 {height: 150px;background-color: blue;}.inner4 {background-color: red;}.inner5 {background-color: green;}.inner6{background-color: blue;}</style><div class="outer1"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div><div class="outer2"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div><div class="outer3"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div><div class="outer4"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div><div class="outer5"><div class="inner4 box"></div><div class="inner5 box"></div><div class="inner6 box"></div></div>
</html>

5.2 多行的侧轴上对齐方式

如果伸缩项目有多行，在侧轴上的对齐方式可以通过align-content设置：

  • flex-start：侧轴起点对齐
  • flex-end：侧轴尾部对齐
  • center：侧轴上居中对齐
  • space-between：侧轴上均匀分布，两端对齐
  • space-around：侧轴上均匀分布，两端距离是中间的一半
  • space-evenly：侧轴上均匀分布，两端距离和中间的一致
  • stretch：侧轴上平分整个父容器默认值）（ps：如果侧轴是纵向的，伸缩项目不能设置height；如果侧轴是横向，伸缩项目不能设置witch。否则无效）

6. 伸缩项目的伸缩性

6.1 伸缩项目在主轴上的基准长度

flex-basis：设置伸缩项目在主轴上的基准长度。若主轴是横向的，那么伸缩项目的 width 失效；若主轴是纵向的，那么伸缩项目的 height 失效。

浏览器根据这个属性计算主轴上是否有多余的空间，默认值是 auto，即等于伸缩项目的width 或height。

6.2 伸缩项目的放大

flex-grow：设置伸缩项目的放大比例，根据比例瓜分主轴上剩余的空间。

瓜分的计算方式：

  • 例如 1：所有的伸缩项目的 flex-grow 都相同，那么所有的伸缩项目平分主轴上剩余的空间。
  • 例如 2：一共 3 个伸缩项目，flex-grow 分别为 1、2、3，那么瓜分主轴上剩余的空间比例为 1/6、1/3、1/2。
<html><style>.outer1 {border: 1px black solid;margin: 10px;display: flex;}.box {width: 100px;height: 100px;}.inner1 {flex-grow: 1;background-color: red;}.inner2 {flex-grow: 2;background-color: green;}.inner3 {flex-grow: 3;background-color: blue;}</style><div class="outer1"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div>
</html>

6.3 伸缩项目的缩小

flex-shrink：设置伸缩项目的缩小比例，如果主轴上空间不够。

缩小的计算公式：

例如：一共 3 个伸缩项目，每个伸缩项目的 flex-basis 是 100px、100px、200px，每个伸缩项目的 flex-shrink 是 1、2、1

第一个伸缩项目缩小的比例：100 * 1 / （100 * 1 + 100 * 2 + 200 * 1）
第二个伸缩项目缩小的比例：100 * 2 / （100 * 1 + 100 * 2 + 200 * 1）
第三个伸缩项目缩小的比例：200 * 1 / （100 * 1 + 100 * 2 + 200 * 1）

<html><style>.outer1 {width: 300px;border: 1px black solid;margin: 10px;display: flex;}.box {height: 100px;}.inner1 {width: 100px;flex-shrink: 1;background-color: red;}.inner2 {width: 100px;flex-shrink: 2;background-color: green;}.inner3 {width: 200px;flex-shrink: 1;background-color: blue;}</style><div class="outer1"><div class="inner1 box"></div><div class="inner2 box"></div><div class="inner3 box"></div></div>
</html>

7. flex 复合属性

flex 可以设置 flex-grow、flex-shrink、flex-basis，有严格顺序。默认值为 flex: 0 1 auto

  • flex: 1 1 auto 可简写为 flex: auto
  • flex: 1 1 0 可简写为 flex: 1
  • flex: 0 0 auto 可简写为 flex: none
  • flex: 0 1 auto 可简写为 flex: 0 auto

8. 伸缩项目排序

伸缩项目的顺序，可以通过order 设置，数值越小，顺序越前，默认为 0。如果order 的值相同，按照伸缩项目的先后排序，在前面的排前面。

<html><style>.outer1 {border: 1px black solid;margin: 10px;display: flex;}.box {width: 100px;height: 100px;text-align: center;line-height: 100px;}.inner1 {order: 3;background-color: red;}.inner2 {order: 1;background-color: green;}.inner3 {order: 2;background-color: blue;}</style><div class="outer1"><div class="inner1 box">3</div><div class="inner2 box">1</div><div class="inner3 box">2</div></div>
</html>

相关文章：

第十三讲_css 伸缩盒模型flex

css 伸缩盒模型flex 1. 伸缩盒模型介绍2. 伸缩盒模型的主轴方向3. 伸缩盒模型的主轴换行4. 主轴上的对齐方式5. 侧轴上对齐方式5.1 一行的侧轴上对齐方式5.2 多行的侧轴上对齐方式 6. 伸缩项目的伸缩性6.1 伸缩项目在主轴上的基准长度6.2 伸缩项目的放大6.3 伸缩项目的缩小 7. …...

编程日记 2024/1/20 3:46:27

【C++干货铺】C++11常用新特性 | 列表初始化 | STL中的变化

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 C11简介 列表初始化 std::initializer_list std::initializer_list使用场景 decltype关键字 STL中的一些变化 新容器 array forward_list 容器中的一些新…...

编程日记 2024/1/20 3:41:23

k8s的对外服务---ingress

service的作用体现在两个方面&#xff1a; 集群内部&#xff1a;不断追踪pod的变化。他会更新endpoint中的pod对象&#xff0c;基于pod的IP地址不断变化的一种服务发现机制。 集群外部&#xff1a;类似负载均衡器&#xff0c;把流量IP端口&#xff0c;不涉及转发url(http、htt…...

编程日记 2024/1/20 3:37:19

element-ui的el-upload组件实现上传拖拽排序图片顺序（sortablejs）

<template><!-- 省略其他配置 --><el-upload ref"upload" :file-list.sync"fileList"></el-upload></template><script>import Sortable from sortablejs;export default {data() {return {fileList: []};},mounted()…...

编程日记 2024/1/20 3:36:18

【PS】PS设计图欣赏、学习、借鉴

【PS】PS设计图欣赏、学习、借鉴 bilibili萌新PS学习计划&#xff1a;PS教程全套零基础教学视频&#xff08;全套81节全新版本&#xff09;...

编程日记 2024/1/20 3:32:15

游戏云化好吗？游戏云化会带来什么?

随着云计算技术的飞速发展&#xff0c;游戏云化成为游戏产业中备受关注的话题。这一新兴技术给玩家和游戏行业带来了全新的可能性。本文将深入探讨游戏云化的概念、优势以及可能带来的影响。 1、什么是游戏云化&#xff1f; 游戏云化是指将游戏的各个环节&#xff0c;包括游戏…...

编程日记 2024/1/20 3:31:14

制造业企业数字化转型难点剖析及解决之法

导语 全球正在由工业经济向数字经济转型过渡&#xff0c;制造业正在且并将长期处于数字化转型发展阶段&#xff0c;并沿着数字化、网络化、智能化阶段不断跃升。但如何找准数字化转型的切入点&#xff0c;以低耗能、低成本、高效率的方式加快制造业转型升级的步伐&#xff0c;仍…...

编程日记 2024/1/20 3:29:12

golang 服务端遇到strict-origin-when-cross-origin，解决跨域整理

golang 服务端遇到strict-origin-when-cross-origin&#xff0c;解决跨域整理 以下内容由chatgpt中文网 动态生成,助力开发找我 代码汇总&#xff1a; func Cors() gin.HandlerFunc {return func(c *gin.Context) {method : c.Request.Methodorigin : c.Request.Header.Get(…...

编程日记 2024/1/20 3:28:11

分布式事务Seata实战-AT模式（注册中心为Eureka）

大致记录Seata的AT模式下创建项目过程中需要注意的点和可能遇到的问题。 本项目是以官网的给的示例&#xff08;即下图&#xff09;进行创建的&#xff0c;以Eureka为注册中心。 官网&#xff1a;Seata AT 模式 | Apache Seata™ 官方代码示例&#xff1a; 快速启动 | Apac…...

编程日记 2024/1/20 3:27:10

windows vscode jsoncpp cmake c++ 构建项目

jsoncpp的编译和使用推荐文章&#xff1a;jsoncpp的编译和使用 | 爱编程的大丙 (subingwen.cn)https://www.subingwen.cn/cpp/jsoncpp/从这个链接下载jsoncpp-master&#xff1a;https://github.com/open-source-parsers/jsoncpp 可以把这个文件夹名字改成jsoncpp&#xff0c;…...

编程日记 2024/1/20 3:25:08

按照一定规则批量修改文件夹内文件的名称

#一个小朋友问我的问题&#xff0c;写好后&#xff0c;就想着分享出来# #目前只想到这一个普通的方法&#xff0c;应该还有更巧妙的方法&#xff0c;读者可以自己思考# 需求&#xff1a;给定文件夹40001&#xff0c;要求将该文件夹内的图片按照40001_00000001,40002_00000002…...

编程日记 2024/1/20 3:18:02

Git项目分支管理规范

一、分支管理 创建项目时&#xff0c;会针对不同环境创建两个常设分支(也可以算主分支&#xff0c;永久不会删除) master&#xff1a;生产环境的稳定分支&#xff0c;生产环境基于该分支构建。仅用来发布新版本&#xff0c;除了从release测试分支或 hotfix-*Bug修复分支进行m…...

编程日记 2024/1/20 3:17:01

ycsb压测mongodb

下载解压 https://github.com/brianfrankcooper/YCSB/releases/download/0.17.0/ycsb-mongodb-binding-0.17.0.tar.gz tar -zxvf ycsb-mongodb-binding-0.17.0.tar.gzycsb提前已经在workload文件夹下准备好了几个压测场景分别对应workload[a:f] workloads/workloada 样例 …...

编程日记 2024/1/20 3:13:59

【zip密码】Zip压缩包删除密码方法，有哪些？

大家都知道压缩包可以进行加密&#xff0c;但是当我们不需要加密压缩包的时候&#xff0c;该如何删除zip压缩包密码呢&#xff1f;那么zip压缩包密码取消都有什么方法呢&#xff1f;今天将方法总结分享给大家。 最原始的方法&#xff0c;就是通过解压文件&#xff0c;将解压出…...

编程日记 2024/1/20 3:11:57

代码随想录算法训练营day24 || 回溯法原理讲解，77.组合

回溯方法的理论原理与定义 回溯算法是潜藏于递归过程之中一种操作&#xff0c;与递归操作相辅相成&#xff1b;初步理解&#xff0c;有递归必有回溯&#xff0c;使用回溯最好的方式是递归&#xff0c;至于其他的方式有待探索。回溯是一种多重循环的变体&#xff0c;其本质就是…...

编程日记 2024/1/20 3:10:55

RPA与通知机器人的完美结合

写在前面 在现代快节奏的工作环境中&#xff0c;我们经常会面临多个任务同时进行的情况&#xff0c;你还在为时间不够用、忙碌而惆怅吗&#xff1f;你还在为时刻盯着电脑流程而烦恼吗&#xff1f;你还在为及时收不到自己的自动化任务进度而焦躁吗&#xff1f;别担心&#xff0…...

编程日记 2024/1/20 3:07:53

openssl3.2 - 官方demo学习 - signature - rsa_pss_direct.c

文章目录 openssl3.2 - 官方demo学习 - signature - rsa_pss_direct.c概述笔记END openssl3.2 - 官方demo学习 - signature - rsa_pss_direct.c 概述 用RSA私钥签名 d2i_PrivateKey_ex()可以从内存载入私钥数据, 得到私钥EVP_PKEY* 从私钥产生ctx, 对ctx进行签名初始化, 设置…...

编程日记 2024/1/20 3:03:49

高效批量剪辑技巧：一键按指定时长精准分割视频的方法，轻松制作视频

随着社交媒体和数字内容的快速发展&#xff0c;视频制作的需求也日益增长。在制作视频时&#xff0c;我们经常需要将长视频分割成多个片段&#xff0c;或者将多个片段连接在一起。为了提高效率&#xff0c;我们可以使用一些高效的批量剪辑技巧&#xff0c;一键按指定时长精准分…...

编程日记 2024/1/20 3:00:46

Android基础知识

1. Activity的生命周期 onCreate&#xff1a;Activity在启动时会被创建&#xff0c;后面一般不会在调用该方法&#xff08;除非例外情况&#xff0c;将Activity回收&#xff0c;例如内存不足&#xff09;&#xff1b;onStart&#xff1a;Activity启动时&#xff0c;会调用该方…...

编程日记 2024/1/20 2:58:43

linux下把动态库变成静态库

1.用nm命令获取动态库中的所有符号列表&#xff0c;假如动态库的文件为lib.so nm -gD lib.so > lib.txt 将把符号列表输出到名为lib.txt的文本文件中 2.创建个新的静态库文件&#xff0c;使用ar命令可以创建一个空的静态库文件 ar -rcs lib.a 3.将动态库中的每个符号提…...

编程日记 2024/1/20 2:55:41

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/9/14 13:50:41

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/9/16 1:45:47

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/9/16 1:44:00

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/9 10:12:05

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/8/21 2:18:11

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/9/12 14:52:52

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/6/21 16:56:20

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/9/7 2:22:03