本文へ移動
相談する無料チェックしてみる

トップお知らせ・ブログCSSのFlexboxとは

CSSのFlexboxとは？基本的な使い方を解説

デザイン・技術読了時間：約3分

ホームページで、メニューを横に並べたり、ボタンを真ん中に置いたりするときによく使われるのが、CSSの「Flexbox（フレックスボックス）」です。

この記事では、Flexboxの基本的な使い方と、よく使う書き方を解説します。

1.Flexboxは、横か縦の一列に並べる仕組み

Flexboxは、箱の中の要素を、横か縦の一列に並べて、間隔やそろえ方を決めるためのCSSの仕組みです。並べる側の箱（親）に display: flex を指定するだけで使えます。

.menu {
  display: flex;
  gap: 16px;
}

この指定で、.menu の中の要素が横に並び、それぞれの間に16pxの間隔があきます。

2.Flexboxがよく使われる理由

以前は、要素を横に並べるために、float などの少し複雑な方法を使っていました。Flexboxを使うと、横並び、中央寄せ、均等な配置などを、短い指定で書けます。

また、画面の幅に合わせて、要素を折り返したり、縦に並べ替えたりすることも簡単です。スマートフォンとパソコンで並び方を変えるレスポンシブデザインとも相性がよい仕組みです。

Flexboxは、一列に並べて、そろえるのが得意な仕組みです。

3.よく使う書き方

よく使うプロパティ

プロパティ役割
display: flexFlexboxを使う（親に指定）
flex-direction並べる向き（row は横、column は縦）
justify-content並べる向きのそろえ方（左寄せ、中央、両端など）
align-items並べる向きと直角の方向のそろえ方
gap要素どうしの間隔
flex-wrap入りきらないときに折り返すか

例1：真ん中に置く

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

例2：左右の両端に分ける

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

例3：スマートフォンでは縦に並べる

.cards {
  display: flex;
  gap: 24px;
}

@media (max-width: 600px) {
  .cards {
    flex-direction: column;
  }
}

よくあるつまずき

  • display: flex を、並べたい要素そのもの（子）に書いてしまう（親に書く）
  • 要素が縮んで、文字が折り返される（flex-shrink や幅の指定を見直す）
  • 横にはみ出す（flex-wrap: wrap で折り返す）

4.よくある質問

FlexboxとGridは、どう使い分けますか？

一列に並べるならFlexbox、縦と横の両方でそろえた表のような配置ならGridが向いています。

古いブラウザでも使えますか？

今の主なブラウザでは、問題なく使えます。

要素の順番を変えられますか？

order というプロパティで、見た目の順番を変えられます。ただし、読み上げの機能などはHTMLの順番で読むため、使いすぎには注意しましょう。

gap が効きません。

親に display: flex が指定されているか確かめましょう。今の主なブラウザでは、Flexboxでも gap が使えます。

5.まとめ

Flexboxは、要素を横か縦の一列に並べて、そろえるためのCSSの仕組みです。

  • 並べる側の箱（親）に display: flex を指定する
  • justify-content と align-items でそろえ方を決める
  • 間隔は gap で指定する
  • スマートフォンでは flex-direction: column で縦に並べられる

まずは、ホームページのメニューやボタンの並びが、Flexboxで作られているか、ブラウザの開発者向けの機能で確かめてみましょう。表のような配置は、CSS Gridとは？で解説しています。

レイアウトの崩れや、CSSの直し方で困っている場合は、浅草Web屋にご相談ください。

相談する

関連記事