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

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
-

関連記事

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

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

疑似要素を使ってアイコンをつけたい!アイコン画像を左右反転させたい!

疑似要素「:before」で要素の先頭に子要素のアイコンをつける 「:before」だと要素の先頭に子要素、「:after」だと要素の最後に子要素がつけられます。 テキストの前にアイコンをつける co …

スマホ対応の見やすい表を作りたい! tableのCSS設定

よく使うtableのCSSデザイン サイト制作の会社概要や比較表、料金表などでよく使うtable。css設定についてまとめました。例にあげたのは、全部tdの場合です。thが入ると変わってくるものもあり …

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …