CSS Flexbox Распределить элементы столбца равным расстоянием с полем - PullRequest
Новая
       14

CSS Flexbox Распределить элементы столбца равным расстоянием с полем

0 голосов
/ 19 октября 2018

Мне интересно, как создать равное расстояние между элементами в столбцах с полями.

Мой код выглядит так: 

.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>

Я подумал, что применение этого метода к «justify-content: space -round» к стилю приложения будет равномерно распределять div по всей странице относительно полей.

1 Ответ

0 голосов
/ 19 октября 2018

Вы были близки! 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>
...