去图灵社区看到了其他人的例子学习,给个学习地址的链接:http://www.ituring.com.cn/article/56881
看到.box>div时疑惑了下,去查手册,复习下。
display: -webkit-box
这个是用在弹性盒布局中的一个属性。在了解它之前,先看两篇文章来了解下什么是弹性盒布局。不用全看,看前面一点就够了。
http://segmentfault.com/a/1190000000707526 和
http://www.w3cplus.com/css3/a-guide-to-flexbox.html。看过后知道,弹性盒布局是
看了这两篇文章之后,有一个迷惑,到底想用弹性盒布局时父元素display属性到底设为什么,flex, flex-box, -webkit-box, ......然后我就看到了知乎上的这篇文章:http://www.zhihu.com/question/25147729。 这个帖子一楼的回答挺好,虽然口气不好,但问题是解决了的。不同的写法是对应不同时期的Flex规范。各个写法的兼容性如下:
再看一下这个:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{ background-color: #619B99; height: 50px; width: 100%; padding: 10px; display: -webkit-box; }
.box>div{ background:#EEEEEE; margin-right: 10px; -webkit-box-flex: 1;}
.box div:first-of-type{ width: 200px; -webkit-box-flex: 0; }
</style>
</head>
<body>
<div class="box addflex">
<div class="item">column1</div>
<div class="item">column2</div>
<div class="item">column3</div>
</div>
</body>
</html>
box-flex属性值在http://www.ituring.com.cn/article/56881这篇文章中总结的很好,我把它拿过来学习。