1.在一个大方块中任意分配小方块
html代码：
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
css代码：
.box {
display: flex;
flex-wrap: wrap;
}
.row{
flex-basis: 100%;
display:flex;
}
.row:nth-child(2){
justify-content: center;
}
.row:nth-child(3){
justify-content: space-between;
}
将小方块分行，即可自由指定其位置
2.网格布局
html代码：
<div class="box">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
css代码：
.box{
display: flex;
}
.inner{
flex: 1;
margin-right: 20px;
}
.inner:last-child{
margin-right: 0;
}
.inner:nth-child(2){
flex: 0 0 50%;
}
主要是设置网格的flex-basis属性，确定其所占主轴的尺寸，可以改变其宽度，此时设置width属性无效
3.圣杯布局
html代码：
<body>
<header></header>
<div class="container">
<main></main>
<nav></nav>
<aside></aside>
</div>
<footer></footer>
</body>
css代码：
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
flex: 1;
}
.container{
display: flex;
}
main{
display: flex;
flex: 1;
}
nav,aside{
flex: 0 0 12em;
}
nav{
order: -1;
}
使用html5语义化标签，同时使用vh单位表示视口大小，使用一次垂直的flex布局，在使用一次水平的flex布局
