单独开贴：flex布局
本帖最后由 李维强-15级 于 2017-9-29 01:23 编辑flex布局太方便了，现在不得不用，我之前还是用的CSS2来布局，太麻烦，现在市面上浏览器都支持flex布局了，IOS8.0和安卓2.2不行，其他都是可以的了，现在安卓4.0都是基本上淘汰了的了。所以放心使用，不用怕
实现垂直居中
http://blog.csdn.net/qianqianstd/article/details/60609389#viewSource
flex大全
http://caibaojian.com/demo/flexbox/justify-content.html
flex语法
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex实例
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html flex布局 元素设置为垂直居中，直接上代码
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>示例</title>
<style>
.main {
display: flex;
flex : 1;
justify-content : center;
flex-direction : column;
align-items : center;
height : 600px;
}
.container {
display: flex;
flex-direction : column;
align-items : center;
width:100%;
height:50%;
overflow-x:scroll;
flex-flow:wrap;
background-color:rgba(222, 204, 204,0.4);
justify-content:center;
}
.container div{
font-size:medium;
border:1px dashed #FFF;
text-align:center;
width : 100%;
height : 10%;
margin : 5px;
}
.container div span {
height : 100%;
}
.container div span label {
font-size:large;
color:cornflowerblue;
}
</style>
</head>
<body>
<div class='main'>
<div class='container'>
<div>
<span>入住日期:<label>2017-09-23</label></span>
<span>价格:<label>258<label></span>
</div>
<div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div>
<div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div><div>
<span>入住日期:<label>2017-09-21</label></span>
<span>价格:<label>258<label></span>
</div>
</div>
</div>
</body>
</html>
页:
[1]