html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex</title>
<link rel="stylesheet" href="css/css3layout.css" />
</head>
<body>
<h3>flex-direction: column;
flex-wrap: wrap;</h3>
<div class="item-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>flex-direction: row;
flex-wrap: nowrap;</h3>
<div class="w-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>flex-direction: row;
flex-wrap: wrap;justify-content: flex-end;
</h3>
<div class="q-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>flex-direction: row;
flex-wrap: wrap-reverse;justify-content: center;</h3>
<div class="e-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>flex-direction: row;
flex-wrap: wrap-reverse;justify-content: space-around;</h3>
<div class="r-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>flex-direction: row;
flex-wrap: wrap-reverse;justify-content: space-between;</h3>
<div class="t-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>未知高度的垂直居中
text-align: center;
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: center;
</h3>
<div class="text-test">
我的世界
</div>
<h3>display:table;文字垂直居中</h3>
<div class="text-table">
<div>我的世界</div>
</div>
<h3>display: flex;
display: -webkit-flex;
flex-direction: row;
align-items: center;</h3>
<div class="y-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>display: flex;
display: -webkit-flex;
flex-direction: row;
align-items: center;</h3>
<div class="u-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<h3>order</h3>
<div class="i-wrap">
<div class="item">2</div>
<div class="item">1</div>
<div class="item">0</div>
<div class="item">4</div>
<div class="item">6</div>
<div class="item">5</div>
</div>
</body>
</html>
css代码
html,body{
width: 100%;
margin: 0;
padding: 0;
}
.item-wrap{
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
}
.item{
width: 200px;
height: 200px;
}
.item:nth-child(odd){
background-color: #000;
}
.item:nth-child(even){
background-color: red;
}
.w-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: nowrap;
}
.q-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
}
.e-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: center;
}
.r-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: space-around;
}
.t-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: space-between;
}
.text-test{
width: 100px;
height: 100px;
text-align: center;
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: center;
}
.text-table{
display: table;
width: 200px;
height: 200px;
text-align: center;
}
.text-table div{
display: table-cell;
vertical-align: middle;
}
.y-wrap{
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
align-items: center;
}
.u-wrap{
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
align-items: flex-start;
}
.y-wrap .item:nth-child(odd){
height: 200px;
flex-grow: 2;
}
.y-wrap .item:nth-child(even){
height: 500px;
flex-grow: 2;
}
.u-wrap .item:nth-child(odd){
height: 200px;
}
.u-wrap .item:nth-child(even){
height: 500px;
}
.i-wrap{
display: flex;
display: -webkit-flex;
flex-direction: row;
color: #fff;
}
.i-wrap .item:nth-child(odd){
order: 1;
}
.i-wrap .item:nth-child(even){
order: 2;
}
代码可以直接复制运行，欢迎指正。
css3flex在布局中的应用
原文地址：http://www.cnblogs.com/wangkdeblogs/p/7827381.html