更多实例
结合使用 flex 和媒体查询为不同的屏幕尺寸/设备创建不同的布局：
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* 响应式布局 - 制作单列布局（100％）而不是两列布局（50％） */
@media (max-width: 800px) {
.flex-item-right, .flex-item-left {
flex: 100%;
}
}
亲自试一试