<div class="flex-container">
<div class="flex-item">弹性布局</div>
<div class="flex-item">弹性布局</div>
<div class="flex-item">弹性布局</div>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #ccc;
}
.flex-item {
flex: 1;
padding: 20px;
background-color: #f00;
color: #fff;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.