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

CSS Flex弹性布局

news 2026/2/9 13:23:59

一、传统布局与flex布局

1、传统布局

2、flex布局

二、flex布局原理

1、布局原理

2、flex布局体验

三、flex布局父项常见属性

1、常见的父项属性

2、flex-direction设置主轴的方向

3、justify-content 设置主轴上的子元素排列方式

4、flex-wrap 设置子元素是否换行

5、align-items设置侧轴上的子元素排列方式（单行）

6、align-content设置侧轴上的子元素的排列方式（多行）

7、flex-flow

四、flex布局子项常见属性

1、常见的子项属性

2、flex子项占的份数

3、align-self控制子项自己在侧轴的排列方式

4、order属性定义子项的排列顺序（前后顺序）

五、应用

一、传统布局与flex布局

1、传统布局

兼容性好；
布局繁琐；
局限性，不能在移动端很好的布局；

2、flex布局

操作方便，布局极为简单，移动端应用很广泛；
PC端浏览器支持情况较差；
IE 11或更低版本，不支持或仅部分支持；

二、flex布局原理

1、布局原理

flex是Flexible Box的缩写，意为 “ 弹性布局 ” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局；

当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效；
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性布局 = flex布局

采用Flex布局的元素，称为Flex容器（ flex container ），简称 “ 容器 ”。它的所有子元素自动成为容器成员，称为Flex项目（ flex item ），简称 “ 项目 ” 。

flex布局原理总结

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式；

2、flex布局体验

（1）准备页面

flex.html中代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.container{background-color: bisque;     }.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="container"><span class="item">1</span><span class="item">2</span><span class="item">3</span></div>
</body>
</html>

页面效果如下：

（2）添加flex布局

给父元素天机属性 display：flex，将父元素设置为flex布局；

.container{background-color: bisque;/* 父容器设置为flex布局 */display: flex;      
}

实现效果：

三、flex布局父项常见属性

1、常见的父项属性

属性名	作用
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）
flex-flow	符合属性，相当于同时设置了flex-direction和flex-wrap

2、flex-direction设置主轴的方向

（1）主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴；

默认主轴方向就是x轴方向，水平向右；
默认侧轴方向就是y轴方向，水平向下；

（2）属性值

flex-direction属性决定主轴的方向（即项目的排列方式）；

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的；

flex-direction的属性值
属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column	从下到上

（3）属性效果

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 800px;height:300px;/* 父容器设置为flex布局 */display: flex;   /* 主轴方向：从左到右 默认 x || row *//* flex-direction: row; *//* 主轴方向：从右到左 *//* flex-direction: row-reverse; *//* 主轴方向：从上到下 *//* flex-direction: column; *//* 主轴方向：从下到上 *//* flex-direction: column-reverse; */}.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;
}

flex-direction: row;
主轴方向：从左到右默认；

flex-direction: row-reverse;

主轴方向：从右到左

flex-direction: column;

主轴方向：从上到下

flex-direction: column-reverse;

主轴方向：从下到上

3、justify-content 设置主轴上的子元素排列方式

justify-content属性定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定好主轴是哪个

（1）属性值

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴剧中对齐（如果主轴是x轴则水平居中）
spance-around	平分剩余空间
spance-between	先两边贴边再平分剩余空间（重要）

（2）属性效果

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 800px;height:300px;/* 父容器设置为flex布局 */display: flex;   /* 主轴方向：从左到右 默认 x || row */flex-direction: row;justify-content: start;/* justify-content: end; *//* justify-content: center; *//* justify-content: space-around; *//* justify-content: space-between; */}.item{background-color: skyblue;width: 200px;height: 100px;/* margin: 10px; */border: 1px solid #ccc;
}

justify-content: start;

子元素排列方式：从头部开始；

justify-content: end;

子元素排列方式：从尾部开始；

justify-content: center;

子元素排列方式：在主轴剧中对齐；

justify-content: space-around;

子元素排列方式：平分剩余空间；

justify-content: space-between;

子元素排列方式：平分剩余空间；

注意：以上只是在主轴上的排列方式，可以结合主轴方向进行多种变换；

4、flex-wrap 设置子元素是否换行

默认情况下，项目都排在一条线（又称 “ 轴线 ” ）上；
flex-wrap属性定义，flex布局中默认是不换行的；
如果父元素装不下子元素，会缩小子元素的宽度，放到父元素里面；

（1）属性值

属性值	说明
nowrap	默认值，不换行
wrap	换行

（2）属性效果

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 800px;height:300px;/* 父容器设置为flex布局 */display: flex;   /* 设置子元素不换行（ 父元素放不下子元素时，会缩小子元素的宽度，使其都在父元素中显示） */flex-wrap: nowrap;/* 设置子元素换行 *//* flex-wrap: wrap; */
}.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;/* border: 1px solid #ccc; */
}

flex-wrap: nowrap;

设置子元素不换行（父元素放不下子元素时，会缩小子元素的宽度，使其都在父元素中显示）

flex-wrap: wrap;

设置子元素换行;

5、align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项的时候使用；

（1）属性值

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起剧中（垂直居中）
stretch	拉伸

（2）属性效果

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 800px;height:300px;/* 父容器设置为flex布局 */display: flex;   /* 设置子元素在侧轴的排列方式 *//* 从上到下 （默认）*/align-items: flex-start;/* 从下到上 *//* align-items: flex-end; *//* 垂直居中 *//* align-items: center; *//* 拉伸（竖直方向，子元素不能给高度） *//* align-items: stretch; */
}.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;/* border: 1px solid #ccc; */
}

align-items: flex-start;

设置子元素在侧轴的排列方式：从上到下（默认）；

align-items: flex-end;

设置子元素在侧轴的排列方式：从下到上；

align-items: center;

设置子元素在侧轴的排列方式：垂直居中；

align-items: stretch;

设置子元素在侧轴的排列方式：拉伸（竖直方向，子元素不能给高度）；

6、align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

（1）属性值

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

（2）属性效果

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 800px;height:400px;/* 父容器设置为flex布局 */display: flex;   /* 设置子元素换行显示 */flex-wrap: wrap;/* 设置侧轴上子元素的排列方式 *//* 在侧轴的头部开始排列 默认值 */align-content: flex-start;/* 在侧轴的尾部开始排列 *//* align-content: flex-end; *//* 在侧轴中间显示 *//* align-content: center; *//* 子项在侧轴平分剩余空间 *//* align-content: space-around; *//* 子项在侧轴先分布在两头，再平分剩余空间 *//* align-content: space-between; *//* 设置子项元素高度平分父元素高度 *//* align-content: stretch; */
}.item{background-color: skyblue;width: 200px;/* height: 100px; */margin: 10px;/* border: 1px solid #ccc; */
}

align-content: flex-start;

设置侧轴上子元素的排列方式：在侧轴的头部开始排；

align-content: flex-end;

设置侧轴上子元素的排列方式：在侧轴的尾部开始排列；

align-content: center;

设置侧轴上子元素的排列方式：在侧轴中间显示；

align-content: space-around;

设置侧轴上子元素的排列方式：子项在侧轴平分剩余空间；

align-content: space-between;

设置侧轴上子元素的排列方式：子项在侧轴先分布在两头，再平分剩余空间；

align-content: stretch;

设置侧轴上子元素的排列方式：设置子项元素高度平分父元素高度（子元素不给高度）；

（3）align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸；
align-content 适用于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值；
总结就是单行找 align-items 多行找 align-content；

7、flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性；

flex-direction: row;
flex-wrap: wrap;/* 相当于 */flex-wrap: row wrap;

四、flex布局子项常见属性

1、常见的子项属性

属性名	作用
flex	设置子项分配剩余空间时所占的份数；
align-self	设置子项单独的对齐方式；
order	设置子项单独的排列顺序；

2、flex设置子项占的份数

flex 属性定义子项分配的剩余空间，用flex来表示占多少份数；

（1）语法

.item {flex : <number>; /* default 0 */
}

（2）示例

实现左右盒子固定宽度，中间盒子宽度自适应；

<style>
*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 80%;height:300px;margin: 0 auto;display: flex;   
}.first{background-color: skyblue;width: 200px;height: 100px;
}.second{background-color: pink;flex: 2;height: 100px;
}.third{background-color: skyblue;width: 200px;height: 100px;
}
</style>

<body><div class="container"><span class="first">1</span><span class="second">2</span><span class="third">3</span></div>
</body>

3、align-self控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch；

（1）语法

.third {/* 设置自己在侧轴上的排列方式 */align-self: flex-end;
}

（2）示例

单独设置最后一个盒子在侧轴方向的排列方式；

<style>
*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 80%;height:300px;margin: 0 auto;display: flex; align-items: flex-start;  
}.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;
}.third{/* 设置自己在侧轴上的排列方式 */align-self: flex-end;
}
</style>

<body><div class="container"><span class="item first">1</span><span class="item second">2</span><span class="item third">3</span></div>
</body>

4、order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0；
注意：和 z-index 不一样；

（1）语法

.second {/* 默认是0，越小越靠前 */order: -1;
}

（2）示例

通过CSS实现第二个，显示在最前面；

*{padding: 0;margin: 0;
}.container{background-color: bisque;width: 80%;height:300px;margin: 0 auto;display: flex;   
}.item{background-color: skyblue;width: 200px;height: 100px;margin: 10px;
}.second {/* 默认是0，越小越靠前 */order: -1;
}

<body><div class="container"><span class="item first">1</span><span class="item second">2</span><span class="item third">3</span></div>
</body>

五、应用

实现一个盒子水平、垂直居中显示，且放缩窗口大小不影响布局；

<style>
body{padding: 0;margin: 0;width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}.item{width: 200px;height: 200px;background-color: skyblue;
}
</style>

<body><div class="item">水平、垂直居中</div>
</body>

========================================================================

每天进步一点点，快来试试这个优秀的布局方式吧~！

CSS Flex弹性布局

一、传统布局与flex布局 1、传统布局 2、flex布局二、flex布局原理 1、布局原理 2、flex布局体验三、flex布局父项常见属性 1、常见的父项属性 2、flex-direction设置主轴的方向 3、justify-content 设置主轴上的子元素排列方式 4、flex-wrap 设置子元素是否换行 …...

编程日记 2024/7/1 10:32:05

第十六章：基于开源大模型使用huggingface在deepspeed与accelerator下继承源码权重保存而实现resume与infer

文章目录前言一、huggingface的_save_checkpoint函数不同阶段保存内容介绍1、_save_checkpoint函数2、save_model函数3、_save函数4、save_pretrained函数5、resume说明二、模型训练Resume相关内容重载1、Resume的一次性权重载入(deepspeed_load_checkpoint)2、Resume的optimi…...

编程日记 2024/7/1 10:30:03

ZooKeeper 入门：初学者指南

在分布式系统领域，协调和同步至关重要。Apache ZooKeeper 是一种分布式协调服务，是帮助管理和同步分布式环境中服务的基本组件。本指南旨在深入分析 ZooKeeper、其架构及其在现代分布式系统中的作用。我们还将探索一个示例来展示其实际影响。 ZooKeeper…...

编程日记 2024/7/1 10:29:01

【数据结构（邓俊辉）学习笔记】二叉搜索树04——AVL树

文章目录 1.重平衡1.1 AVL BBST1.2 平衡因子1.3 适度平衡1.4 接口1.5 失衡复衡 2. 插入2.1 单旋2.2 双旋2.3 实现 3. 删除3.1 单旋3.2 双旋3.3 实现 4. （3 4）-重构4.1 "34"重构4.2 "34"实现4.3 rotateAt4.4 综合评价 1.重平衡 1…...

编程日记 2024/7/1 10:28:01

SpringMVC基础详解

文章目录一、SpringMVC简介1、什么是MVC2、MVC架构模式与三层模型的区别3、什么是SpringMVC 二、HelloWorld程序1、pom文件2、springmvc.xml3、配置web.xml文件4、html文件5、执行Controller 三、RequestMapping注解1、value属性1.1、基础使用1.2、Ant风格（模糊匹配…...

编程日记 2024/7/1 10:25:56

SQL SERVER 设置端口

要在SQL Server中设置端口，可以通过SQL Server Configuration Manager来完成。以下是详细的步骤： 1. 打开SQL Server Configuration Manager 在Windows中，按 Win R 键打开运行窗口。输入 SQLServerManager<version>.msc 并按回车。例…...

编程日记 2024/7/1 10:24:55

华芯微特2024慕尼黑上海电子展预告

7月8日-7月10日，2024慕尼黑上海电子展在上海新国际博览中心举办。华芯微特展号:E4.4815，诚意邀请各位莅临参观。公司介绍华芯微特是一家由留美归国资深技术团队创立的中国芯片设计公司，是国家高新技术企业。2014年进军MCU产业，专…...

编程日记 2024/7/1 10:23:53

DETR End-to-End Object Detection with Transformers

End-to-End Object Detection with Transformers 论文链接：http://arxiv.org/abs/2005.12872 代码地址：https://github.com/facebookresearch/detr 一、摘要提出了一种将目标检测视为直接集合预测问题的新方法。该方法简化了检测流程，有效…...

编程日记 2024/7/1 10:22:52

【后端面试题】【中间件】【NoSQL】ElasticSearch 节点角色、写入数据过程、Translog和索引与分片

中间件的常考方向： 中间件如何做到高可用和高性能的？ 你在实践中怎么做的高可用和高性能的？ Elasticsearch节点角色 Elasticsearch的节点可以分为很多种角色，并且一个节点可以扮演多种角色，下面列举几种主要的&…...

编程日记 2024/7/1 10:21:50

【TB作品】玩具电子琴，ATMEGA128单片机，Proteus仿真

题目 7 ：玩具电子琴基于单片机设计一能够发出中音八个音阶的音乐信号的电子琴，能够实现弹奏和音符显示功能。具有 8 个音阶按键，每按下一个按键时，所对应的 LED 点亮，音符进行显示。具体要求如下： &…...

编程日记 2024/7/1 10:20:49

1974Springboot医院远程诊断管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot医院远程诊断管理系统是一套完善的信息系统，结合springboot框架和bootstrap完成本系统，对理解JSP java编程开发语言有帮助系统采用springboot框架（MVC模式开发），系统具有完整的源代码和数据库…...

编程日记 2024/7/1 10:19:47

SQL游标的应用场景及使用方法

SQL游标的应用场景及使用方法大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将深入探讨SQL中游标的应用场景及使用方法。游标在SQL中是一种重要的数据…...

编程日记 2024/7/1 10:18:46

LLama-Factory使用教程

本文是github项目llama-factory的使用教程注意，最新的llama-factory的github中训练模型中，涉及到本文中的操作全部使用了.yaml配置。新的.yaml的方式很简洁但不太直观，本质上是一样的。新的readme中的.yaml文件等于下文中的bash指令 PS: …...

编程日记 2024/7/1 10:16:44

Java面试题：讨论在Java Web应用中实现安全的认证和授权机制，如使用Spring Security

在Java Web应用中，实现安全的认证和授权是至关重要的，Spring Security是一个强大的框架，可以简化这项工作。以下是详细讨论如何在Java Web应用中使用Spring Security实现安全的认证和授权机制。 Spring Security简介 Spring Security是一个…...

编程日记 2024/7/1 10:15:43

如何在Vue3项目中使用Pinia进行状态管理

**第一步：安装Pinia依赖** 要在Vue3项目中使用Pinia进行状态管理，首先需要安装Pinia依赖。可以使用以下npm命令进行安装： bash npm install pinia 或者如果你使用的是yarn，可以使用以下命令： bash yarn add pinia *…...

编程日记 2024/7/1 10:14:41

【初阶数据结构】深入解析队列:探索底层逻辑

🔥引言本篇将深入解析队列:探索底层逻辑，理解底层是如何实现并了解该接口实现的优缺点，以便于我们在编写程序灵活地使用该数据结构。 🌈个人主页：是店小二呀 🌈C语言笔记专栏：C语言笔记 &#…...

编程日记 2024/7/1 10:12:38

Go 语言环境搭建

本篇文章为Go语言环境搭建及下载编译器后配置Git终端方法。目录安装GO语言SDK Window环境安装下载安装测试安装编辑器下载编译器设置git终端方法总结安装GO语言SDK Window环境安装网站 Go下载 - Go语言中文网 - Golang中文社区还有 All releases - The…...

编程日记 2024/7/1 10:10:36

javascript v8编译器的使用记录

我的机器是MacOS Mx系列。一、v8源码下载构建 1.1 下载并更新depot_tools git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git export PATH/path/to/depot_tools:$PATH 失败的话可能是网络问题，可以试一下是否能ping通，连…...

编程日记 2024/7/1 10:08:33

C语言--vs使用调试技巧

1.什么是bug? 1.产品说明书中规定要做的事情，而软件没有实现。 2.产品说明书中规定不要做的事情，而软件确实现了。 3.产品说明书中没有提到过的事情，而软件确实现了。 4.产品说明书中没有提到但是必须要做的事情，软件确没有实…...

编程日记 2024/7/1 10:07:31

Spring Boot中的国际化配置

Spring Boot中的国际化配置大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！今天我们将探讨如何在Spring Boot应用中实现国际化配置，使得应用能够轻松…...

编程日记 2024/7/1 10:06:30

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/8 4:37:41

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。一、环境准备 1、VMware 基于VMware构建Linux虚拟机是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案所以VMware虚拟机方案是必须要学习的。 （1）设置网关打开VMware虚拟机，点击编辑…...

编程新知 2026/1/25 14:43:07

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2026/2/8 10:51:38

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/30 17:24:20

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2026/1/20 20:10:03

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2026/2/1 14:51:21

一、传统布局与flex布局

1、传统布局

2、flex布局

二、flex布局原理

1、布局原理

2、flex布局体验

三、flex布局父项常见属性

1、常见的父项属性

2、flex-direction设置主轴的方向

3、justify-content 设置主轴上的子元素排列方式

4、flex-wrap 设置子元素是否换行

5、align-items设置侧轴上的子元素排列方式（ 单行 ）

6、align-content设置侧轴上的子元素的排列方式（多行）

7、flex-flow

四、flex布局子项常见属性

1、常见的子项属性

2、flex设置子项占的份数

3、align-self控制子项自己在侧轴的排列方式

4、order属性定义子项的排列顺序（前后顺序）

五、应用

相关文章：

5、align-items设置侧轴上的子元素排列方式（单行）