单独开贴：flex布局

李维强-15级 · 发表于 2017-9-28 22:46:12

本帖最后由李维强-15级于 2017-9-29 01:23 编辑

flex布局太方便了，现在不得不用，我之前还是用的CSS2来布局，太麻烦，现在市面上浏览器都支持flex布局了，IOS8.0和安卓2.2不行，其他都是可以的了，现在安卓4.0都是基本上淘汰了的了。所以放心使用，不用怕

实现垂直居中
http://blog.csdn.net/qianqianstd ... 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

李维强-15级 · 发表于 2017-10-2 14:06:56

flex布局元素设置为垂直居中，直接上代码

[HTML] syntaxhighlighter_viewsource syntaxhighlighter_copycode

<!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>

		自动登录	找回密码
密码			立即注册

单独开贴：flex布局

浏览过的版块