首页 > 其他 > 详细

Flex-弹性布局

时间:2017-07-23 19:31:58      阅读:241      评论:0      收藏:0      [点我收藏+]

Flex是Flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。如:

.box{

  display:flex;

}

行内元素也可以使用Flex布局。

.box{

  display:inline-flex;

}

注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

 

关于弹性布局,在这段时间的学习中,我总结了以下几个常用的属性

1.容器的属性

1.1是否换行

flex-wrap:nowrap/wrap/wrap-reverse;

1.2justify-content属性

justify-content:center(居中)/space-between(对齐);

2.项目的属性

flex-grow

flex-grow:1;

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

 

Flex-弹性布局

原文:http://www.cnblogs.com/hjl-x/p/7225574.html

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