横並びのデザインをもっと自由に!フレックスボックスレイアウト

css

2021-10-21

子要素のレイアウトを指定する

ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました!

横の配置をデザインする「justify-content」

親要素にdisplay:flex;(インライン要素ならdisplay:inline-flex;)を設定すると子要素が横に並びます。デフォルトは左揃えです。

左揃え flex-start

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content: flex-start;
}

 

右揃え flex-end

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content:flex-end;
}

 

センター揃え center

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content: center;
}

 

等間隔 space-between

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content: space-between;
}

 

等間隔 space-around

端の要素の外側にも余白が入るのがspace-betweenとの違いです。

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content: space-around;
}

 

改行 flex-wrap: wrap;

  • A
  • B
  • C
  • D
  • E
  • F
例)
親要素{
display:flex;
flex-wrap: wrap;
}
子要素{width:33.333%;}

 

最初の要素だけ左揃え、その他は右揃えにしたい

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
justify-content: flex-end;
}
子要素:first-child{margin-right: auto;}

 

並び順を指定する「flex-direction」

左右方向を決められます。初期値は「flex-direction: row;」で左から順番に並びます。
パソコンでは左に配置したいけど、スマホでは一番下にしたい…等に対応できて便利!

逆方向 row-reverse

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
flex-direction: row-reverse;
}

 

縦並び

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
flex-direction:column;
}

 

逆方向の縦並び

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
flex-direction:column-reverse;
}

 

一行の縦の配置をデザインする「align-items」

縦方向の位置を設定できます。初期値は上揃えです。

上揃え flex-start

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
align-items: flex-start;
}

 

下揃え flex-end

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
align-items: flex-end;
}

 

上下センター揃え center

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
align-items: center;
}

 

親要素の高さいっっぱいに stretch

  • A
  • B
  • C
  • D
  • E
  • F
親要素{
display:flex;
align-items: stretch;
}
子要素{height:auto;}

 

複数行の縦の配置をデザインする「align-content」

複数行の上揃え flex-start

  • A
  • B
  • C
  • D
  • E
  • F
例)
親要素{
display:flex;
flex-wrap: wrap;
align-content:flex-start;
}
子要素{width:33.333%;}

 

複数行の下揃え flex-end

  • A
  • B
  • C
  • D
  • E
  • F
例)
親要素{
display:flex;
flex-wrap: wrap;
align-content:flex-end;
}
子要素{width:33.333%;}

 

 

複数行の上下センター揃え center

  • A
  • B
  • C
  • D
  • E
  • F
例)
親要素{
display:flex;
flex-wrap: wrap;
align-content:center;
}
子要素{width:33.333%;}

 

-css

関連記事

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

cssで作るいろいろなグラデーション

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました! グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書い …

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

CSSで縦書き

縦書き 文章を縦書きにして右から左へ流す。 縦書きの基本 文章を縦書きにして右から左へ流す。 親{text-align:right; display: inline-block;} 子{writing …

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …