Как изменить верхнее поле для центрированных элементов в реакции

Question

Я показываю элемент внутри App_body. Элемент центрируется по горизонтали и вертикали, используя Flex.

<div className="App-body">
< Element1 className="element1"/>
< Element2 />
< Element3 />
 </div>

.App-body {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

Три элемента центрированы по центру экрана. Я пытаюсь поместить элемент кулака сверху, но это не работает.

.element1{
top: 0;
}

Как установить верхнее поле первого элемента?

Answer 1

Flex-элементы могут иметь свои margin: auto для разделения доступного пространства между ними. например:

.App-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  height: 100vh;
}

.App-body > *:first-child,
.App-body > *:last-child {
  margin-bottom: auto;
}

.App-body > * {
  height: 20px;
  width: 50%;
  background: orange;
  margin: 3px;
}

<div class="App-body">
 <div></div>
 <div></div>
 <div></div>
</div>

Answer 2

Я хочу игнорировать родительское позиционирование и хочу иметь возможность изменить верхнее поле element1 так, чтобы оно вставлялось в верхнюю часть страницы

Вы можете использовать абсолютное позиционирование для решения твоя проблема. Вам нужно будет позиционировать родительский контейнер, а затем использовать абсолютную позицию для позиционирования дочернего элемента и удаления его из обычного потока родительского контейнера.

.App-body {
  position: relative;
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.element1{
  position: absolute;
  top: 0;
}

Answer 3

Добавьте этот стиль к элементу element1

.element1 {
  position: absolute;
  top: 0;
}

Answer 4

  justify-content: space-between;

Это то, что вы хотите, если вам нужно разнести их все, с первым элементом вверху, вторым центром и последним снизу. Это то, что вы ищете?