如何在第一行放置图标，在第二行放置文本？

Question

标题几乎解释了自己。我有弹性容器，在里面我有两个div在列内，应该在不同的行，但我不能让它们像那样工作。

br ， p 等标签由于某种原因无法正常工作。

JSFiddle

HTML

  .dashboard-top-item {
    border-width: 0px 2px 0px 2px;
    border-style: solid;
    border-color: #444444;
    background-color: #595858;
    color: #D0D0D0;
    height: 21vh;
    font-size: medium;
    display: flex;
    justify-content: center;
    align-items: center;
  }

CSS

boost::any

我怎么能这样做？提前谢谢！

Answer 1

使用flex-flow：

只需将此{CSS>属性添加到您的.dashboard-top-item中，其值为：

flex-flow: column;

结果：JSFiddle。

使用flex-wrap和min-width：

这个有点复杂。

.dashboard-top-item {
  border-width: 0px 2px 0px 2px;
  border-style: solid;
  border-color: #444444;
  background-color: #595858;
  color: #D0D0D0;
  font-size: medium;
  padding: 4vh; /* not fixed height */
  display: flex;
  flex-wrap: wrap; /* allow flex to wrap */
}
/* in addition: */
.dashboard-top-item > div {
  flex: 1;
  box-sizing: border-box;
  text-align: center;
}
.ion-ionic {
  min-width: 100%;
}

结果：JSFiddle。