Question

在大屏幕上我有4个按行顺序排列的图标，但是在小屏幕上（比如小于768像素），我需要按行顺序有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: 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>

Answer 2

您可以使用 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

小屏幕上的自适应Flexbox

2 个答案: