フレックスに反応します

Question

フレックスを使用してレイヤーに要素を配置しますが、小さな画面サイズに切り替えると、要素が小さくなります。<col-md-4>を使用するとブートストラップ中に小さくなります。全幅、私は小さな画面サイズにユーザスイッチが（私は

<div class="container"> 
    <div> 
    </div> 
    <div> 
    </div> 
    <div> 
    </div> 
</div> 

私のCSSを見て、このようなページの真ん中に、その本当にハードの中心に<col-md-3>の3 div要素をブートストラップを使用していませんでしたときに似た何かをしたいです

.container div { 
    height:180px; 
    width:180px; 
    background-color:black; 
    margin: 15px 15px; 
} 

Answer 1

あなたは

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.container div { 
 
    height: 180px; 
 
    width: 180px; 
 
    background-color: black; 
 
    margin: 15px 15px; 
 
} 
 

 
@media screen and (max-width:320px) { 
 
    .container { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    } 
 
}

<div class="container"> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
</div>

チェックこのjsFiddlescale前面と背面がアライメントの変化を見ることがあること、特定の画面解像度で、センターでそれらを合わせ、以下のようflexとmedia queryの両方を使用することができます。