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

flex弹性盒子布局

时间:2018-05-15 10:37:23      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:line   font   控制   str   spl   元素   art   reverse   负数   

一、在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex;

二、在父容器上添加flex-direction设置子元素主轴方向

不写默认值是X轴从左到右

row:X轴从左到右

row-reverse X轴从右到左

column  Y轴从上到下

column-reverse Y轴从下到上

三、设置在主轴方向的对齐方式justify-content

flex-start 整体左对齐

flex-end 整体右对齐

center  整体居中

space-between  据主轴两端平均分布

space-around 据主轴整体平均分布

四、设置在侧轴方向的对齐方式align-items

flex-start  侧轴左(上)

flex-end  侧轴右(下)

center   侧轴居中

stretch  侧轴伸展延伸布局(元素在侧轴方向没有宽高)

五、设置在侧轴方向(有多行的情况下整体内容)的对齐方式align-content

flex-start   侧轴左(上)

flex-end   侧轴右(下)

center   侧轴居中

space-between  据侧轴两端平均分布

space-around   据侧轴平均分布 

stretch  侧轴伸展延伸布局(元素在侧轴方向没有宽高)

六、order属性控制顺序

在默认情况下flex里的元素会按照书写顺序排列,但是可以通过order属性改变,数值小的排列在前面,还可以是负数

.item{

   order:0

}

 

flex弹性盒子布局

标签:line   font   控制   str   spl   元素   art   reverse   负数   

原文地址:https://www.cnblogs.com/liumingwang/p/9039116.html

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