CSS Flex一维布局
一、启动flex布局
在属性中加入 display:flex;
二、确定flex布局的主轴
flex布局有一条主轴和一条交叉轴,启用此布局默认是水平的主轴main axis。
使用flex-direction: ;属性来确定主轴的方向,该属性有以下四个值
row 水平主轴,起点在左端 || row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上方 || column-reverse主轴为垂直方向,起点在下方
三、确定换行属性 flex-wrap: ;
设置了该属性项目就不会等分容器宽度,而是按照自身的宽度进行排列,排不下的时候就换行
换行也就是一行排不下去了,该属性有三个属性值
nowrap不换行
wrap换行
wrap-reverse换行,向上换行
四、前面两个属性简写flex-flow: ;
flex-flow属性是flex-direction属性flex-wrap属性的简写形式
默认值为row nowrap
五、确定主轴方向上的对齐方式 justify-content: ;
该属性对应五个值分别为
flex-start 左对齐 || center 居中 || flex-end 右对齐
space-around; 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
space-between; 两端对齐,项目之间的间隔都相等
space-evenly; 距离两侧的间距和项目之间的间距相等
六、确定在交叉轴的对齐属性 align-items: ;
flex-start //(默认)交叉轴的起点对齐
flex-end //交叉轴的终点对齐
center //交叉轴的中点对齐
baseline //项目的第一行文字的基线对齐
=====以上全部是设置在容器上的属性=====
=====以下全部是设置在项目自身属性=====
七、确定项目排序属性 order: ;
属性值0,1,2,3.......该属性值越小排列越靠前
八、确定项目单独排列属性 align-self: ;
属性值center居中、flex-end靠底端对齐
九、确定项目放大、缩小、主轴方向上的列宽
flex: flex-grow flex-shrink flex-basise;
默认值 0 1 auto
两个快捷键auto(1 1 auto)、none( 0 0 auto)
根据设置的grow、shrink值来进行分配大小。
若是grow和shrink都是1则进行均分项目剩余空间,若都是0则剩余空间不进行分配
由于flex-basise的权重比width、 height的权重要高,所以flex-basise属性会覆盖前面的主轴方向上的列宽
__EOF__

本文链接:https://www.cnblogs.com/DnmyCourage/p/14562127.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~