代码之家  ›  专栏  ›  技术社区  ›  Dave

flexbox和屏幕大小问题

  •  0
  • Dave  · 技术社区  · 7 年前

    我有两个问题,我希望有人能提供一些指导。首先,我有一行字体很棒的图标,我正在使用flexbox格式化。当屏幕尺寸缩小时,我想转换flexbox,使图标垂直而不是水平挤压。我尝试过不同的转换方法,但似乎无法正常工作:

    正常宽度: enter image description here

    当屏幕尺寸缩小时: enter image description here

    另外,我想在每个图标下面添加一些文本,以便通知用户他们点击了什么。为了使代码正确对齐,我需要在代码中添加什么?

    这是我当前的代码:

    .wrapper {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
    }
    
    .wrapper i {
      color: $overdue;
      border: 3px solid $overdue;
      border-radius: 25px;
      padding: 18px;
      transition: all 0.5s linear;
    }
    
    .wrapper i:hover {
      background: $overdue;
      color: $color-lightest;
      box-shadow: 0 0 0 0 $overdue;
      -webkit-animation: rubberBand 1s;
      animation: rubberBand 1s;
    }
    <div class="wrapper">
      <i class="fa fa-clipboard fa-3x" aria-hidden="true"></i>
      <i class="fa fa-building fa-3x" aria-hidden="true"></i>
      <i class="fa fa-users fa-3x" aria-hidden="true"></i>
      <i class="fa fa-university fa-3x" aria-hidden="true"></i>
      <i class="fa fa fa-file-pdf-o fa-3x" aria-hidden="true"></i>
    </div>

    谢谢!

    1 回复  |  直到 7 年前
        1
  •  1
  •   Gabriel Bueno    7 年前

    你应该用 flex-direction: column 以便将水平曲轴箱转换为垂直曲轴箱。

    .wrapper{
      display:flex;
      justify-content:space-evenly;
      width:100%;
    }
    
    @media screen and (max-width: 768px) {
      .wrapper {
        flex-direction: column;
      }
    }
    

    如果我理解正确的话,你应该这样做:

    <div class="wrapper">
      <div>
        <i class="fa fa-clipboard fa-3x" aria-hidden="true"></i>
        <h3>Description</h3>
      </div>
      <div>
        <i class="fa fa-building fa-3x" aria-hidden="true"></i>
        <h3>Description</h3>
      </div>
      <div>
        <i class="fa fa-users fa-3x" aria-hidden="true"></i>
        <h3>Description</h3>
      </div>
      <div>
        <i class="fa fa-university fa-3x" aria-hidden="true"></i>
        <h3>Description</h3>
      </div>
      <div>
        <i class="fa fa fa-file-pdf-o fa-3x" aria-hidden="true"></i>
        <h3>Description</h3>
      </div>
    </div>
    

    :)