小屏幕上的响应式 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

在media中使用flex: 0 1 50%;并将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>

Answer 2

您可以使用 flex-wrap: wrap; 强制新的订单项并使用 flex: 0 0 50%; 取两行的space。

.welcome{
     flex-wrap: wrap;
}

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

这是一个代码笔： https://codepen.io/alessandroinfo/pen/rEBKMd

小屏幕上的响应式 Flexbox

Responsive Flexbox on small screens

html

css

flexbox

responsive