一、首先创建一个flexbox容器
.flexboxcontainer{
display: -webkit-flex;
display: flex;
}
二、flex项按行排列
flex项目默认按行排列，也可设置为column，按列排列，默认设置为row
.flexboxcontainer{
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.flexboxcontainer>div{
width:100px;
height:100px;
background-color:#e46119;
border:1px solid #ccc;
margin:5px;
}
三、flex项按列排列
.flexboxcontainer{
border:1px solid #ccc;
width:450px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
四、flex项左(flex-start)对齐和右(flex-end)对齐（如果是row，设置justify-content;如果是column，设置align-items）
.flexboxcontainer{
border:1px solid #ccc;
width:450px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
五、flex项行居中(center)对齐，列居中同理
.flexboxcontainer{
border:1px solid #ccc;
width:450px;
height:300px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
六、自定义比例分配
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flexboxcontainer{
border:1px solid #ccc;
width:450px;
height:300px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.bigitem{
-webkit-flex:3 0 0;
flex:3 0 0;
}
.smallitem{
-webkit-flex:1 0 0;
flex:1 0 0;
}
.flexboxcontainer>div{
height:100px;
background-color:#e46119;
border:1px solid #ccc;
margin:5px;
}
</style>
</head>
<body>
<div class="flexboxcontainer">
<div class="bigitem"></div>
<div class="smallitem"></div>
</div>
</body>
</html>
七、多行居中布局（webkit内核浏览器、IE11支持，Firefox不支持）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.flexboxcontainer{
border:1px solid #ccc;
width:450px;
height:300px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-align-content: stretch;
align-content: stretch;
}
.flexboxcontainer>div{
width:100px;
height:100px;
background-color:#e46119;
border:1px solid #ccc;
margin:5px;
}
</style>
</head>
<body>
<div class="flexboxcontainer">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
作者：BJ_benjamin 发表于2013-11-27 0:29:48 原文链接
阅读：113 评论：0 查看评论