よくわかる「flexbox」基礎編（２）タテ方向（html,css）

＜２：ヨコ方向かタテ方向どちらに並べるかを決める＞

次に「ヨコ方向」「タテ方向」どちらに並べるかを決めます。

今回は「タテ方向」です。

flex-direction: column（タテ方向に並べる）

html

    <div class="box02">
      <h2 class="sample01">１</h2>
      <h2 class="sample02">２</h2>
      <h2 class="sample03">３</h2>
    </div>

css（親要素）

.box02 {
  width: 120px;
  height: 330px;
  background-color: rgb(86, 185, 169);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

＜５：完成＞

これで完成です。

＜おさらい＞

１：「flexbox」開始を宣言
２：ヨコ方向かタテ方向どちらに並べるかを決める
３：主軸の調整
４：交差軸の調整
５：完成

html

    <div class="box02">
      <h2 class="sample01">１</h2>
      <h2 class="sample02">２</h2>
      <h2 class="sample03">３</h2>
    </div>

css

.box02 {
  width: 120px;
  height: 330px;
  background-color: rgb(86, 185, 169);

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.sample01 {
  width: 80px;
  height: 80px;

  font-size: 74px;
  color: red;
  border: red solid 3px;
  background-color: white;
}

.sample02 {
  width: 80px;
  height: 80px;

  font-size: 74px;
  color: black;
  border: black solid 3px;
  background-color: white;
}

.sample03 {
  width: 80px;
  height: 80px;

  font-size: 74px;
  color: blue;
  border: blue solid 3px;
  background-color: white;
}