首页 > 解决方案 > 使用媒体查询拆分弹性盒

问题描述

我有以下用于桌面的 flexbox。如何添加媒体查询,以便在 iphone 6 上我得到蓝色框居中,然后是红色框?

.container{
   display:flex;
   justify-content:space-around;
   }
   .left, .right{
   width:40vw;
   min-height:300px;
   }
   
   .left{
   background-color:blue;
   }
   
   .right{
   background-color:red;
   }
<div class='container'>
   <div class='left'>
   </div>
   <div class='right'>
   </div>
 <div>  
   

标签: iphoneflexboxmedia-queries

解决方案


只需将 flex 更改为在 css 中阻塞并更改左右的宽度


推荐阅读