为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 Flex布局

Flex布局

2018.09.05 12:59 924浏览

什么是flex布局

2009年,W3C提出了Flex布局,它可以更简便,完整,响应式地实现各种页面的布局。Flex是Flexible Box的缩写,意思是"弹性布局"。任何一个元素都可以flex布局。注意:设置Flex布局以后,子元素的float,clear,vertical-align属性将失效。Flex是dispaly的属性值,当一个元素的display为felx的时候,它就脱离了盒模型。

.box{display:flex}

flex的基本概念

Flex的核心概念就是容器和轴。容器包括父容器和子容器,所有子元素自动成为容器成员,成为Flex项目,简称“项目”。轴包括主轴和交叉轴。使用Flex布局,首先你要设置父容器。

webp

webp

轴包括主轴和交叉轴。

容器的属性


webp

flex-direction

.box{flex-direction:row|row-reverse|column|column-reverse;}

webp

flex-wrap

.box{flex-wrap:nowrap|wrap|wrap-reverse;}

webp

flex-flow

.box{flex-flow:<flex-direction>||<flex-wrap>;}

webp

justify-content

.box{justify-content:flex-start|flex-end|center|space-between|space-around;}

webp

align-items

.box{align-items:flex-start|flex-end|center|baseline|stretch;}

webp

align-content

.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}

项目的属性

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

.box{order:<integer>;}

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

.box{flex-grow:<number>;}

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.box{flex-shrink:<number>;}

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.box{flex-basis:<length>|auto;}

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.box{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}

algin-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

webp

align-self

.box{align-self:auto|flex-start|flex-end|center|baseline|stretch;}

注意:移动端安卓UC浏览器不支持Flex布局

一个简单的示例

.box{display:flex;  align-items:center;/*垂直居中*/  justify-content: center;/*水平居中*/}

参考文献:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html,http://blog.csdn.net/magneto7/article/details/70854472

(可能写得不够仔细,不够全面,如果有任何意见或者建议给我,我会继续完善它的,希望看到的人能够对你有所帮助)



作者:超爱吃小龙虾
链接:https://www.jianshu.com/p/597f0e2866ae


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
70
获赞与收藏
458

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

152篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消