html - CSS Flexbox 将列元素与边距等距展开

Question

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

我的代码是这样的:

.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 在页边距方面均匀分布在页面上。

Answer 1

你很接近! 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>