flex布局

flex布局是Flexible Box的缩写,“弹性布局”,用来为盒状模型提供最大的灵活性。

容器设置为display:flex

flex有两个轴:主轴和交叉轴

一、容器上有6个属性:

  •   flex-direction:决定主轴的方向(项目的排列方向) 
row主轴为水平方向,起点在左端
row-reverse主轴为水平方向,起点在右端
column主轴为垂直方向,起点在上沿
column-reverse主轴为垂直方向,起点在下沿

 

  •   flex-wrap:定义如果轴线排不下,如何换行
nowrap(默认)不换行
wrap换行,第一行在上方
wrap-reverse第一行子在下方
  • flex-flow:flex-direction 和 flex-wrap的简写
  • justify-content:定义了项目在主轴的对齐方式
flex-start(默认值)左对齐
flex-end右对齐
center居中
space-between两端对齐,项目之间的间隔都相等
space-around每个项目两侧的间隔想等
  •  align-items:定义在交叉轴上如何对齐
flex-start交叉轴起点对齐
flex-end交叉轴终点对齐
center交叉轴居中对齐
baseline项目的第一行文字的基线对齐
stretch如果项目未设置高度为或设为auto,将占满整个容器的高度

  align-content:定义多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用

flex-start与交叉轴起点对齐
flex-end与交叉轴终点对齐
center与交叉轴居中对齐
space-between与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 
stretch 
  
  

二、项目上有6个属性

  • order:定义项目的排列顺序。数值越小,排列越靠前,默认为0

          .item{  order:<integer>}

  • flex-flow:定义项目的放大比例,默认为0,

        .item{  flex-flow:<number>}

     如果所有项目的flex-flow属性都为1,则它们将等分剩余空间。如果一个为2,其他的为1,则前者占据的剩余空间比其他的多一倍。

  • flex-shrink:定义了项目的缩小比例,默认为1,

      .item{  flex-shrink:<number>}

    如果一个项目的flex-shrink属性为0,其他的都为1,则空间不足时,前者不缩小。

  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间。
  • flex
  • align-self

参考资料:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

   三:全局布局+多列布局+居中布局

参考资料:https://blog.csdn.net/wangwangwanglichao/article/details/79765161

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值