Flex布局属性和方法简介

前几日,同学推荐使用farbox来记录内容,相当于blog,但是尝试了几天,总感觉很别扭,现在把写在那里的东西迁移过来,以供加深记忆...

昨天已经提到了Flex布局,今天就简单制作了一个静态页面,具体用法当然还是看blog比较清楚,这里就记录一下使用心得吧!!!
一,主要属性:
flex-direction:项目的排列方向,row,row-reverse,column,column-reverse
flex-wrap:wrap|nowrap|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;在交叉轴上如何对其
align-content:flex-start|flex-end|center|space-between|space-around|stretch  多根轴线的对其方式
二,项目的属性
order,定义项目的排列顺序,数值越小,排列越靠前
flex-grow:放大比例,默认为0
flex-shrink:缩小比例,默认为1
flex-basis:在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。
align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

多个属性的结合往往产生意想不到的效果,注意是针对哪个box进行的flex布局
<div class='box'>
    <div></div>
    <div></div>
    <div></div>
</div>
<style>
    .box{
        display:flex;//切记是针对哪个元素进行flex布局    
    }
</style>

最后,阮一峰还有一个实例教程,讲解的很清楚,有时间可以细细琢磨
(http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)

还有,明天进行蓝天云听八大主播二期的完善。。。(轮播器)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值