html - CSS Flexbox使用利润率均匀分布列元素

我想知道如何在具有边距的列中的项目之间创建相等的距离。

我的代码如下所示：

.App {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.about {
  text-align: center;
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

.userInput {
  background-color: rgb(0, 255, 255);
  border: solid black 4px;
  border-radius: 4px;
  margin: 20px 0;
}

.story {
  background-color: rgb(100, 149, 237);
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

<div class='App'>
  <div class='userInput'>
  </div>
  <div class='Story'>
  </div>
  <div class='About'>
  </div>
</div>

我认为将其应用到App样式的“ justify-content：space-around”会相对于页边距将div均匀分布在整个页面上。

最佳答案

你近了！ CSS区分大小写，您的故事和有关本节的内容实际上以大写字母开头。因此，您需要选择.Story和.About。请参见下面的代码。

.App {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.About {
  text-align: center;
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

.userInput {
  background-color: rgb(0, 255, 255);
  border: solid black 4px;
  border-radius: 4px;
  margin: 20px 0;
}

.Story {
  background-color: rgb(100, 149, 237);
  border: solid black 3px;
  border-radius: 4px;
  margin: 20px 0;
}

<div class='App'>
  <div class='userInput'>
  </div>
  <div class='Story'>
  </div>
  <div class='About'>
  </div>
</div>