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__

本文作者GTK
本文链接https://www.cnblogs.com/DnmyCourage/p/14562127.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   GTK  阅读(220)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示