<div class="container container1">
    <div class="flex-item flex-item1">1 1</div>
    <div class="flex-item flex-item2">1 2</div>
    <div class="flex-item flex-item3">1 3</div>
</div>
<div class="container container2">
    <span class="flex-item flex-item1">2 1</span>
    <span class="flex-item flex-item2">2 2</span>
</div>
<div class="container container3">
    <span class="flex-item flex-item1">3 1</span>
    <span class="flex-item flex-item2">3 2</span>
</div>

*{margin:0;padding:0;}
body{font:12px/1.5 'Microsoft Yahei','\5b8b\4f53',tahoma,arial,sans-serif;padding-top:42px; color:#f00; background:#F2F8FD}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
ol,ul,li{list-style:none}
input,select{font-family:Tahoma;font-size:12px; color:#b09d85;}
a{text-decoration:none; color:#b09d85}
a:hover{text-decoration:none;}

.container{width: 420px;height: 220px;background: #DBEFFA;margin: 10px}
.container1{display:flex;}
.container2,.container3{display:inline-flex;}

.flex-item{background: #BDD8F5;margin: 10px;color: #000;text-align: center;font-size: 14px;}
.container1 .flex-item,.container2 .flex-item,.container3 .flex-item{width: 200px;height:200px;}