首页 > 其他 > 详细

flexbox弹性盒子布局

时间:2018-03-30 13:01:33      阅读:257      评论:0      收藏:0      [点我收藏+]

之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下,对居中元素绝对百分比定位,然后通过margin偏移的方式来实现。

技术分享图片

假如使用了flex后,实现起来就简单了,而且不需要自己去算,也不需要绝对定位,只需要通过对伸缩容器定义两个属性,justify-content定义伸缩项目沿着主轴线的对齐方式为center, align-items定义伸缩项目在侧轴(垂直于主轴)的对齐方式为center,具体如下:

技术分享图片

 关于伸缩项目的相关属性,主要是3个,order,flex(flex-grow,flex-shrink,flex-basis的组合),align-self;用来比较多的是前两个。

order

有一种用法比较多,想设置一组中有两个元素一个排第一,另外一个排最后,主需要将第一个的order:-1;另一个为order:0;这样就好了。

譬如我们想控制一个container中有4个box,想box4为一个显示,box1为最后一个显示。只需要 这样

技术分享图片

 

flexbox弹性盒子布局

原文:https://www.cnblogs.com/xiaoan0705/p/8675544.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!