<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body> <div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div> <div class="item item4">-1</div>
<div class="item item5">-3</div>
<div class="item item6">0</div>
</div>
<span class="test"></span> </body>
</html>
.box {
width:400px;
height:104px;
border: 1px solid #000000;
display: -webkit-flex;
display: flex;
/*float, clear, vertical-align失效*/
/*
flex-direction: row;
flex-wrap: wrap;
*/
/*flex-flow是上面两个的合体*/
flex-flow: row wrap;
/*主轴*/
justify-content: space-around;
/*交叉轴*/
align-items: center;
/*多轴*/
align-content: center;
}
.box .item {
width: 50px;
height: 50px;
border:1px solid pink;
font-size: 16px;
order:;
/*空间不够的时候，项目等比缩小*/
flex-shrink:;
}
.box .item3 {
/*占据两份*/
flex-grow:;
align-self: flex-end;
}
.test {
/*内联元素也可以做flex布局*/
display: -webkit-inline-flex;
display: inline-flex;
}
运行结果：
