时间戳

首页 > 解决方案 > 小屏幕上的响应式 Flexbox

html - 小屏幕上的响应式 Flexbox

问题描述

我在大屏幕上有 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>

标签： htmlcssflexboxresponsive

解决方案

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

推荐阅读