Zenn
⛄

⛄️Flexboxの基本⛄️

2022/12/03に公開
CSS
HTML
初心者
プログラミング
tech

🌟Flexbox

flexboxとは
複雑なレイアウトも簡単に組めるCSSのレイアウトモジュール
横並びのレイアウトなどを作成する際によく使う書き方💡

🔥基本的な使い方をマスターする！

基本の６つのプロパティの使い方

  • flex-directionプロパティ
  • flex-wrapプロパティ
  • justify-contentプロパティ
  • align-itemsプロパティ
  • align-contentプロパティ
  • flex-flowプロパティ

🌱基本的な書き方

Flexコンテナーと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れてHTMLは完了

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

Flexboxを使って子要素を横並びにするには、親要素に display: flex; を指定するだけOK。

.container {
        display: flex;
      }

1. flex-directionプロパティ

子要素であるflexアイテムを横や縦など、どの方向に並び替えるかを指定できる

row(初期値)　左から右へ

.container {
  display: flex;
  flex-direction: row;
}

row-reverse　右から左へ

.container {
  display: flex;
  flex-direction: row-reverse;
}

Column　上から下へ

.container {
  display: flex;
  flex-direction: column;
}

Column-reverse　下から上へ

.container {
  display: flex;
  flex-direction: row-reverse;
}

2. flex-wrapプロパティ

子要素の折り返しを指定できるようになる

子要素のflexアイテムが親要素のflexコンテナーに収まりきらない場合に折り返すのか折り返さないのかなどの指定をできる

nowrap(初期値)
折り返さず１列に表示

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

wrap
折り返して上から下へ

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

wrap-reverse（実務ではあまり使わない）
折り返して下から上へ

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

3. justify-contentプロパティ

子要素の水平方向の揃えを指定できるようになる
親要素に空きスペースがあった場合子要素を水平方向のどの位置に配置するかを指定することができる

flex-start(初期値)
左揃え

.container {
  display: flex;
  justify-content: flex-start;
}

flex-end
右揃え

.container {
  display: flex;
  justify-content: flex-end;
}

center
中央揃え

.container {
  display: flex;
  justify-content: center;
}

space-between
両端のアイテムは端っこに配置し、残りの子要素を均等に配置

.container {
  display: flex;
  justify-content: space-between;
}

space-around
均等配置だがコンテナーの両端にはアイテムの間隔の半分の大きさの余白ができる

.container {
  display: flex;
  justify-content: space-around;
}

space-evenly
均等配置だがコンテナーの両端にはアイテムの間隔と同じ大きさの余白ができる

.container {
  display: flex;
  justify-content: space-evenly;
}

4. align-itemsプロパティ

子要素の垂直方法の揃えを指定できるようになる
親要素に空きスペースがあった場合子要素を垂直方向のどの位置に配置するか指定できる

stretch(初期値)
親要素の高さや中身が一番多い子要素の高さに合わせて広がる

.container {
  display: flex;
  align-items: stretch;
}

flex-start
親要素の高さ内で上揃え

.container {
  display: flex;
  align-items: flex-start;
}

flex-end
親要素の高さ内で下揃え

.container {
  display: flex;
  align-items: flex-end;
}

center
親要素の高さ内で中央揃え

.container {
  display: flex;
  align-items: center;
}

baseline
子要素のベースラインで揃える

.container {
  display: flex;
  align-items: baseline;
}

5. align-contentプロパティ

子要素を複数行にしたときの揃えを指定できるようになる
親要素に空きスペースがあり子要素が複数行に渡って配置された場合の垂直方向の揃えを指定できる

⚠️子要素が複数行になっているときのみの指定なので
flex-wrapプロパティにnowrapが適用されていて子要素が一行になっている場合は無効になる

stretch(初期値)
親要素の高さに合わせて広がる

.container {
  display: flex;
  align-content: stretch;
}

flex-start
親要素の高さ内で上揃え

.container {
  display: flex;
  align-content: flex-start;
}

flex-end
親要素の高さ内で下揃え

.container {
  display: flex;
  align-content: flex-end;
}

center
親要素の高さ内で中央揃え

.container {
  display: flex;
  align-content: center;
}

space-between
最初の行と最後の行は端っこに配置し、残りの行を均等に配置

.container {
  display: flex;
  align-content: space-between;
}

space-around
最初の行と最後の行,両端にはアイテムの半分の大きさの余白ができ、残りの行は均等に配置

.container {
  display: flex;
  align-content: space-around;
}

6. flex-flowプロパティ

flex-directionとflex-wrapをまとめて指定できるようになる

flex-flow: row no wrap;
flex-direction 、flex-wrapの順で記述

まとめ
暗記することよりも、何ができるのかをしっかり理解しておくことが大事🙆🏻‍♀️

Flexbox チートシートなど利用する
https://web-cheatsheet.com/css-flexbox

今日は簡単にflexboxについて学んだ！
明日は休みでラウンジ予約したから1日中できる！
12月は予定詰め込みすぎだから集中して進められる時に一気にやるぞ💪🏻パワー

Discussion