<div class="container container1">
	<div class="flex-item flex-item1">测试文字测试文字<br />测试文字测试文字测试文字<br />测试文字</div>
</div>
<div class="container container2">
	<div class="flex-item flex-item2">测试文字测试文字<br />测试文字测试文字测试文字<br />测试文字</div>
</div>
<div class="container container3">
	<div class="flex-item flex-item3">测试文字测试文字<br />测试文字测试文字测试文字<br />测试文字</div>
	<div class="flex-item flex-item4">测试文字测试文字<br />测试文字测试文字测试文字<br />测试文字</div>
</div>
*{margin:0;padding:0;}
body{font:12px/1.5 'Microsoft Yahei','\5b8b\4f53',tahoma,arial,sans-serif; 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: 300px;height: 300px;background: #DBEFFA;margin: 10px;}
.flex-item{background: #BDD8F5;color: #000;text-align: center;font-size: 14px;padding: 10px}

.container{display: flex;flex-direction: row;justify-content: center;align-items: center;}

.flex-item1{width: 200px;height: 200px}
.flex-item3,.flex-item4{margin: 5px;flex: 1}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.