flexbox和屏幕尺寸

Question

我有两个问题，我希望有人可以提供一些指导。首先，我有一排字体真棒图标，我正在使用flexbox格式化。当屏幕尺寸缩小时，我想变换flexbox，使图标垂直而不是水平压扁。我已尝试使用转换进行不同的操作，但似乎无法使其正常工作：

正常宽度：

屏幕尺寸缩小时：

此外，我想在每个图标下面添加一些文本，以便通知用户他们点击了什么。我需要添加什么才能使代码正确对齐？

这是我目前的代码：

.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>

谢谢！

Answer 1

您应该使用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>

：）