Как разместить 2 дива под друг другом вертикально?

Question

HTML:

<div class:"1">
</div>
<div class:"2">
</div>

Как заCSSсить так, что бы они оказались под друг другом (вертикально)?

Answer 1

Дайте родительскому элементу:

display: flex;
flex-direction: column;

Полный пример:

h1 {
  color: white;
  text-align: center;
  margin: auto;
}

.parent {
  width: fit-content;
  height: fit-content;
  background-color: rgb(200, 200, 200);
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.parent div {
  width: 200px;
  height: 100px;
  background-color: rgb(100, 100, 100);
  margin: 5px;
  display: flex;
}

<div class="parent">
  <div class="1">
    <h1>
      1
    </h1>
  </div>
  <div class="2">
    <h1>
      2
    </h1>
  </div>
</div>

Answer 2

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100%;
}

<div class="container">
  <div class="item">
    1
  </div>
  <div class="item">
    2
  </div>
</div>

Answer 3

Они и сами по себе друг под другом встают.

БЛОГ НА HUSL

Как разместить 2 дива под друг другом вертикально?

Ответы (3 шт):