第3回: Flexboxで作る自由自在なレイアウト

この回の目標

  • Flexboxで横並びレイアウトを作れる
  • Webサイトでよく見る構成をFlexboxで再現できる
  • 2カラム / 3カラムを作れる
目次
  1. 見出し1
  2. 見出し2
    1. 見出し2-1
    2. 見出し2-2

Flexboxとは？

Flexboxは「要素をきれいに並べるための仕組み」

Flexboxを使うとできること

HTMLの基本は、要素は縦に並ぶ

ブロック①

ブロック②

Flexboxを使うことで、block要素を横並びに配置可能

ブロック①

ブロック②

FlexBoxはレイアウトを整えるための道具

Flexboxの使用例

アイコン＋テキスト

アイコン＋テキストの横並び

画像＋説明文

富士山（ふじさん）は日本でいちばん高い山で、標高は3,776メートルです。静岡県と山梨県の境目にあり、日本の象徴として世界的にも有名です。

  • 種類：活火山
  • 標高：3,776m（日本一高い山）
  • 最後の噴火：1707年の 宝永大噴火
  • 世界遺産登録：2013年に UNESCO の世界文化遺産

ボタンの横並び

横並びの要素を作る

親要素と子要素

HTMLには親と子の関係がある

<div class="parent">
  <p>テキスト</p>
</div>

div（親）
└ p（子）

外側が 親要素、中にあるものが 子要素

親と子の例

<div class="flex">
  <div class="flex__child">ブロック①</div>
  <div class="flex__child">ブロック②</div>
</div>

ブロック①

ブロック②

  • .flexは 親要素
  • .flex__childは 子要素

HTML/CSS の書き方

横並びにしたい要素（子要素）を親要素で囲んで、
親要素 のCSSに display: flex; を指定する

コード

<div class="flex">
  <div class="flex__child">ブロック①</div>
  <div class="flex__child">ブロック②</div>
</div>
.flex {
  display: flex;
  border: 5px solid #666;
  padding: 20px;
  gap: 20px;
}

結果

ブロック①
ブロック②

Flexboxで囲むと、子要素が自動的に横並びになる

子要素の幅を調整する

子要素に幅を指定することで、より自由なレイアウトが可能

子要素のサイズ調整にはflexwidth（% , px ）がよく用いられる

flexの場合

.two-column {
  display: flex;
}

.two-column__image {
  flex: 2;    /* 比率 */
  border:1px solid ;
}

.two-column__text {
  flex: 8;    /* 比率 */
  border:1px solid ;
}

テキストエリア

flexの数値で割合を指定できます。

widthの場合

.two-column__image {
  width: 50%;
  border:1px solid ;
}

.two-column__text {
  width: 50%;
  border:1px solid ;
}

テキストエリア

flexの数値で割合を指定できます。

位置をコントロールする

横方向の調整（justify-content）

justify-content: center;
justify-content: space-between;
justify-content: space-around;

縦方向の調整（align-items）

align-items: center;
テキスト１
テキスト２
テキスト３
align-items: flex-start;
テキスト１
テキスト２
テキスト３
align-items: stretch;
テキスト１
テキスト２
テキスト３

間隔を作る

gap: 20px;

余白はgapで作る

折り返し

flex-wrap: nowrap;

デフォルトはこちらになっている

テキスト１
テキスト２
テキスト３
テキスト４
テキスト５
テキスト６
テキスト７
テキスト８

文字がはみ出してしまう

flex-wrap: wrap;
テキスト１
テキスト２
テキスト３
テキスト３
テキスト３
テキスト３
テキスト３
テキスト３

flex-wrap: wrap;で横幅が足りなくなったら折り返すことができる

レスポンシブの基礎

⑥ よく使われるパーツを作る

グローバルナビゲーション

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

2カラムレイアウト（画像＋テキスト）

LPの定番構成

富士山（ふじさん）は日本でいちばん高い山で、標高は3,776メートルです。静岡県と山梨県の境目にあり、日本の象徴として世界的にも有名です。

  • 種類：活火山
  • 標高：3,776m（日本一高い山）
  • 最後の噴火：1707年の 宝永大噴火
  • 世界遺産登録：2013年に UNESCO の世界文化遺産

3カラムレイアウト（カード）

カード1

カードの説明文です。

カード2

カードの説明文です。

カード3

カードの説明文です。

ミニ課題

  • 2カラムのセクションを作る
  • 3カラムのカードを作る
  • ナビをspace-betweenで配置する

この回のまとめ

  • Flexboxは親に指定する
  • justify-contentで横方向調整
  • align-itemsで縦方向調整
  • flex値で比率調整できる