Flexbox行和列

Question

在台式机和平板电脑中，我目前正在尝试将我的Flexbox内容集中在一起，让我的每个项目之间都有一些空间，这样它们就不会被挤压在一起了。在移动中，物品堆叠是我想要的，但是单词不会在中心挤压，所以你可以阅读它们。我会插入一个片段，但您可能需要全屏显示我在桌面和移动设备中的含义。如果您需要我进一步解释，请告诉我。谢谢！

#quotecontainer {
  display: flex;
  background-color: #1DA0A3;
  flex-flow: row;
  max-width: 1700px;
  margin: 0 auto;
}
#quotes {
  flex: 1 0 200px;
  display: flex;
  flex-flow: row;
  margin: 1em;
  text-decoration: none;
  color: black;
}
#michelle {
  align-self: center;
  margin-bottom: 1em;
}
#jerry {
  align-self: center;
  width: 400px;
  margin-bottom: 1em;
  ;
}
#lighticon {
  align-self: center;
  margin-bottom: 1em;
  width: 100px;
}
@media (max-width: 420px) {
  #quotes {
    text-align: left;
    justify-content: center;
    display: flex;
    flex-direction: column;
  }
}

<div id="quotecontainer">
  <div id="quotes">
    <h3 id="michelle">"She always thinks of her clients."
<br>
-Michelle Houle

Connections FSE
</h3>

    <img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" alt="" id="lighticon" />

    <h3 id="jerry">"Very smart, creative person, problem solver."
<br>
-Jerry Nygard C2P

</h3>
  </div>
</div>