小屏幕上的響應式 Flexbox

Question

我在大屏幕上有 4 個按行順序排列的圖標，但在小屏幕上（比方說小於 768px），我需要按行順序排列 2 個圖標。

這是我當前的代碼：

 .welcome { display: flex; justify-content: space-around; } @media (max-width: 768px) { /* I need the code here */ }

 <section class="container text-center"> <h2 id="h2-welcome"><strong>Welcome to our website</strong></h2> <div class="welcome"> <div class="welcome-content"> <i class="fas fa-life-ring fa-5x"></i> <p>Sherbimi 24/7</p> </div> <div class="welcome-content"> <i class="fas fa-tachometer-alt fa-5x"></i> <p>Shpejt & Stabil</p> </div> <div class="welcome-content"> <i class="fas fa-globe-europe fa-5x"></i> <p>Kanale nga gjithe Bota</p> </div> <div class="welcome-content"> <i class="fas fa-user-shield fa-5x"></i> <p>Sigurt & Shpejt</p> </div> </div> </section>

Answer 1

您可以使用flex-wrap: wrap; 強制新的訂單項並使用flex: 0 0 50%; 用於占用一行的兩個項目的空間。

.welcome{
     flex-wrap: wrap;
}

@media (max-width: 768px) {
     flex: 0 50%;
}

這是一個 CodePen： https ://codepen.io/alessandroinfo/pen/rEBKMd

Answer 2

使用flex: 0 1 50%; 在media和設置flex: 0 1 50%; 到.welcome

 .welcome { display: flex; justify-content: space-around; flex-wrap: wrap; } @media (max-width: 768px) { .welcome div { flex: 0 1 50%; } }

 <section class="container text-center"> <h2 id="h2-welcome">Welcome to our website</h2> <div class="welcome"> <div class="welcome-content"> <i class="fas fa-life-ring fa-5x"></i> <p>Sherbimi 24/7</p> </div> <div class="welcome-content"> <i class="fas fa-tachometer-alt fa-5x"></i> <p>Shpejt & Stabil</p> </div> <div class="welcome-content"> <i class="fas fa-globe-europe fa-5x"></i> <p>Kanale nga gjithe Bota</p> </div> <div class="welcome-content"> <i class="fas fa-user-shield fa-5x"></i> <p>Sigurt & Shpejt</p> </div> </div> </section>