【CSS3】Flex弹性布局

文章目录


前言

弹性布局(Flexible Layout),也称为Flexbox布局,是CSS3主推的一种布局方式!!!


提示:以下是本篇文章正文内容,下面案例可供参考

一、基本概念

1.容器和项目:

使用display: flex;布局的元素(父元素)称为"容器",其所有子元素自动成为容器成员,称为"项目"。容器和项目是弹性布局的基本组成单位,它们各自拥有控制布局的属性。

2.主轴和交叉轴:

主轴是项目的排列方向,可以是水平方向(x轴)或垂直方向(y轴)。交叉轴则是与主轴垂直的轴,即绕主轴顺时针旋转90°得到的轴。

在复杂布局中,元素既可以是容器也可以是项目。

二、容器属性

1.flex-direction:决定主轴的方向,即x轴还是y轴

可选值 解释
row 从左到右(默认值)
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

示例效果:
flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2.flex-wrap:定义项目的换行方式

可选值 解释
nowrap 不换行(默认值)
wrap 换行,第一行在上方
wrap-reverse 换行,第一行在下方

示例效果:(主轴方向:默认从左到右)
flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

3.flex-flow:flex-direction属性和flex-wrap属性的简写形式

比如实现水平从左到右排列,自动换行,第一行在上方,可自行尝试。

4.justify-content:定义项目在主轴上的对齐方式

可选值 解释
flex-start 起点对齐(默认值)
flex-end 终点对齐
center 居中对齐
space-between 两端对齐,项目之间的间隔相等
space-around 每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍

示例效果:(主轴方向:默认从左到右)
justify-content: flex-start ;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: center;

4.align-items:定义项目在交叉轴上的对齐方式

可选值 解释
flex-start 起点对齐
flex-end 终点对齐
center 中点对齐
baseline 项目的第一行文字的基线对齐
stretch 默认值,如果项目未设置高度或设为auto,将占满整个容器的高度

示例效果:(主轴方向:默认从左到右)
align-items: flex-start;

align-items: flex-end;

align-items: baseline;

align-items: center;

ps:以上属性均添加在设置display: flex;属性的元素中。

三、项目属性

1.order:定义项目的排列次序

数值越大排的越靠后,默认为0

2.flex-grow:定义项目的放大比例

  • 默认为0,即如果存在剩余空间,也不放大。
  • 当项目设置了该属性之后,原来的宽度或高度失效。
  • 父元素有多余的空间时,设置放大比例的元素会按照比例占据多余空间;当父元素空间不足时,项目会同等比例缩小。

示例效果:(主轴方向:默认从左到右)

设定flex父容器宽度为1200px,按如下设置项目的flex-grow属性
1:flex-grow: 1;
2:flex-grow: 2;
3:flex-grow: 3;

3.flex-shrink:定义项目的缩小比例

  • 默认为1,负值无效。
  • 当容器空间不足时,设置了flex-shrink属性的项目会按照比例缩小。
  • flex-shrink为0的项目则不会压缩。

4.flex-basis:定义项目在分配多余空间之前的默认大小

5.flex:flex-grow、flex-shrink和flex-basis的简写形式

默认值为0 1 auto。

6.align-self:允许单个项目在交叉轴上覆盖容器的align-items属性进行对齐

四、应用场景

弹性布局广泛应用于移动端网页开发,具有以下优点:

自适应性 :容器与元素的自适应特性使得页面能够快速适应不同尺寸的设备和屏幕分辨率。
灵活性 :提供了多种属性来控制布局,可以轻松地调整页面行为。
可读性 :语法简洁清晰,易于理解,便于开发者维护和修改。
适合复杂布局:能够更好地满足设计师和开发者的要求,实现更多样化、更灵活的网页布局效果。

五、完结撒花

学习并不是枯燥无味的,只是我们不懂得从中寻找快乐罢了。

相关推荐
gis收藏家21 分钟前
从稀疏数据(CSV)创建非常大的 GeoTIFF(和 WMS)
前端
程序视点35 分钟前
望言OCR 2025终极评测:免费版VS专业版全方位对比(含免费下载)
前端·后端·github
五点六六六1 小时前
前端常见的性能指标采集
前端·性能优化·架构
吳所畏惧1 小时前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
陈随易2 小时前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic2 小时前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮2 小时前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温2 小时前
DOM元素添加技巧全解析
前端
JSON_L2 小时前
Vue 电影导航组件
前端·javascript·vue.js
用户21411832636022 小时前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端