CSS Flexbox 将列项目与边距等距离展开答案

【问题标题】：CSS Flexbox Spread the Column Items Equal Distance with MarginCSS Flexbox 将列项目与边距等距离展开
【发布时间】：2019-03-24 17:07:02
【问题描述】：

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

我的代码如下所示：

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

【问题讨论】：

标签： html css flexbox margin

【解决方案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>

【讨论】：