flexbox弹性盒子布局
周马鲁
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 标题</title>
<META charset="utf-8">
<script type="text/javascript" src="http://h5rsc.vipstatic.com/lefeng_pc/js/jquery/jquery.pack.js?20150916"></script>
<style type="text/css">
#demo1{
width: 100%;
background: #ccc;
display: -webkit-flex;/*表示使用弹性布局*/
}
#demo1 .item{
flex: 1;/*占容器的比例*/
text-align: center;
background:#00ff00;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo1 .item2{
flex: 2;/*占容器的比例*/
text-align: center;
background:#0000ff;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo1 .item3{
width:100px;
text-align: center;
background:#ee00ff;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo2{
position: absolute;
top: 50%;
left:50%;
z-index: 3;
-webkit-transform: translate(-50%,-50%);
border-radius: 6px;
background:#00ff00;
border:1px solid #000;
}
#demo3{
width:100%;
height: 600px;
background:#ccc;
justify-content: center;
align-items: center;
display: -webkit-flex;/*表示使用弹性布局*/
}
#demo3 .item{
/*设计item是个圆形*/
width:50px;
height:50px;
border-radius: 50px;
background:#000;
border:1px solid red;
}
</style>
</head>
<body>
1.混合划分
<hr />
<div id="demo1">
<div class="item">
flex:1
</div>
<div class="item">
flex:1
</div>
<div class="item2">
flex:2
</div>
<div class="item3">
我只有100px
</div>
</div>
<br />
不定宽高，水平垂直居中<br /><br />
2.方法1：可实现屏幕的水平垂直居中<br />
<div id="demo2">
<p>不定宽高的水平垂直居中hhhhhhhhhhhh</p><br/>方法1
</div>
<hr />
方法2：似乎不可实现屏幕的水平垂直居中，只能实现某个容器内的水平垂直居中(容器最好是有宽高)
<div id="demo3"> <span class="item"></span> </div>
</body>
<html>
<head>
<title>Bootstrap 实例 - 标题</title>
<META charset="utf-8">
<script type="text/javascript" src="http://h5rsc.vipstatic.com/lefeng_pc/js/jquery/jquery.pack.js?20150916"></script>
<style type="text/css">
#demo1{
width: 100%;
background: #ccc;
display: -webkit-flex;/*表示使用弹性布局*/
}
#demo1 .item{
flex: 1;/*占容器的比例*/
text-align: center;
background:#00ff00;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo1 .item2{
flex: 2;/*占容器的比例*/
text-align: center;
background:#0000ff;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo1 .item3{
width:100px;
text-align: center;
background:#ee00ff;
color: #000;
padding: 5px;
margin-left: 2px;
}
#demo2{
position: absolute;
top: 50%;
left:50%;
z-index: 3;
-webkit-transform: translate(-50%,-50%);
border-radius: 6px;
background:#00ff00;
border:1px solid #000;
}
#demo3{
width:100%;
height: 600px;
background:#ccc;
justify-content: center;
align-items: center;
display: -webkit-flex;/*表示使用弹性布局*/
}
#demo3 .item{
/*设计item是个圆形*/
width:50px;
height:50px;
border-radius: 50px;
background:#000;
border:1px solid red;
}
</style>
</head>
<body>
1.混合划分
<hr />
<div id="demo1">
<div class="item">
flex:1
</div>
<div class="item">
flex:1
</div>
<div class="item2">
flex:2
</div>
<div class="item3">
我只有100px
</div>
</div>
<br />
不定宽高，水平垂直居中<br /><br />
2.方法1：可实现屏幕的水平垂直居中<br />
<div id="demo2">
<p>不定宽高的水平垂直居中hhhhhhhhhhhh</p><br/>方法1
</div>
<hr />
方法2：似乎不可实现屏幕的水平垂直居中，只能实现某个容器内的水平垂直居中(容器最好是有宽高)
<div id="demo3"> <span class="item"></span> </div>
</body>
</html>
兼容性
1，ios可以使用最新flex布局
2，Android4.4以下只能兼容旧版本的flexbox布局
3，Android4.4及以上，可以使用最新的flex布局
所以，建议使用旧版本兼容性的flexbox布局。
属性替换如下：
| 新flex布局 | 旧flexbox布局 |
display: -webkit-flex; | display: -webkit-flex-box; |
justify-content: center; | box-pack: center; |
| -webkit-flex:1 | -webkit-flex-box:1 |
align-items: center; | box-align: center; |
类似资料：