码迷,mamicode.com
首页 > 其他好文 > 详细

flex 弹性布局整理

时间:2017-01-13 15:43:19      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:lin   整理   ace   enter   sel   弹性   ems   etc   asi   

flex布局(弹性布局) 1.容器具备的属性有: flex-dirction:(决定主轴的方向)(即项目排列方向) 取值:row/row-reverse/column/column-reverse/ flex-wrap:(如果一条轴线排不了,如何换行) 取值:nowrap(默认):不换行。 wrap:换行,第一行在上方。 wrap-reverse:换行,第一行在下方。 flex-flow :(flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap) justify-content:(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(默认值):轴线占满整个交叉轴。 2.项目的属性: order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大 flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 flex-basis项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大 小。 flex align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属 性,如果没有父元素,则等同于stretch。

flex 弹性布局整理

标签:lin   整理   ace   enter   sel   弹性   ems   etc   asi   

原文地址:http://www.cnblogs.com/TTTK/p/6282834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!