レイアウトの調整に役立つ!CSSのflexboxの使い方【初心者向け】

デザイン初心者向けにCSSのflexboxの使い方について解説しています。PCやスマホ向けのレイアウト調整に役立つ知識です。デザインの作業をする上では欠かせない要素になるので、実際にレイアウトを調整しながら理解していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSのflexboxの使い方について解説しています。

PCでは横並び、スマホでは縦並びをしたいという時にレイアウトの調整ができます。PCとスマホの両方に対応したサイトを作る上では必須の知識になるので、ぜひ覚えておきましょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

田島悠介

今回はflexboxを使ってみよう。

大石ゆかり

田島メンター!!flexboxというのは何ですか〜?

田島悠介

親要素に記述することで、複数の子要素に対して色々な配置の指定ができる便利なものだよ。さっそくやってみよう。

大石ゆかり

分かりました!

 

Flexboxとは

Flexbox(Flexible Box Layout Module)は親要素に簡単な指示を記述することで、複数の子要素についてさまざまなレイアウトの調整をまとめて行うことができるものです。

 

記述方法

Flexboxの記述は親要素で行うというのが大事なポイントです。まず適用したい項目の親要素に以下のように入力します。

display: flex;

インライン要素に適用する場合は以下のように入力します。

display: inline-flex;

これを記入した要素は自動的に「Flexコンテナ」となり、その子要素は「Flexアイテム」となります。これによってFlexboxのプロパティが使用可能になります。代表的なプロパティをいくつか書いてみましょう。

 

田島悠介

レイアウトの調整を行いたいものの親要素に、このように記述するんだ。

大石ゆかり

親要素がFlexコンテナになることで、その子要素の配置についての指定ができるようになるっていう感じでしょうか。

田島悠介

そうだね。次は並び方や配置に関する基本的な機能を紹介するよ。

 

flex-directionの書き方

flex-directionは項目の並び方を指定することのできるプロパティです。

以下のHTMLとCSSを使い、CSSのflex-directionの値(青文字の部分)を変えてみましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="menu">
      <div class="item">
        1
      </div>
      <div class="item">
        2
      </div>
      <div class="item">
        3
      </div>
      <div class="item">
        4
      </div>
      <div class="item">
        5
      </div>
    </div>
  </body>
</html>

CSS

.menu{
  display: flex;
  flex-direction: row;
}
.item{
  text-align: center;
  width: 50px;
  height: 20px;
  padding : 3%;
  margin : 3%;
  background-color: #c97796;
  color: white;
}

 

rowにした場合:横並び

左から右へ、項目を横に並べます。rowの代わりにrow-reverseにすることで並び順を逆にすることもできます。

columnにした場合:縦並び

上から下へ、項目を縦に並べます。columnの代わりにcolumn-reverseにすることで並び順を逆にすることもできます。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

flex-wrapの書き方

flex-wrapでは回り込み・折り返しを行うかどうかを設定することができます。

CSSのflex-wrapの値(青文字の部分)を変えてみましょう。(HTMLは先ほどと同じものを使います)

.menu{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.item{
  text-align: center;
  width: 50px;
  height: 20px;
  padding : 3%;
  margin : 3%;
  background-color: #c97796;
  color: white;
}

 

nowrapにした場合:折り返しなし

折り返しをせず、画面に合うように縮小されます。

wrapにした場合:折り返しあり

項目が折り返されて下のように表示されます。

また、wrap-reverseにした場合は項目が折り返され、順番が上下逆になります。

 

justify-contentの書き方

justify-contentは項目の配置場所を指定するプロパティです。

同様に、CSSのjustify-contentの値(青文字の部分)を変えてみましょう。

.menu{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.item{
  text-align: center;
  width: 50px;
  height: 20px;
  padding : 3%;
  margin : 3%;
  background-color: #c97796;
  color: white;
}

 

flex-startにした場合:前詰め

横並びのときは左詰め・縦並びのときは上詰めになります。(画像は横並びの場合です)

flex-endにした場合:後詰め

横並びのときは右詰め・縦並びのときは下詰めになります。(画像は横並びの場合です)

centerにした場合:中央揃い

各項目は中央に寄せられます。(画像は横並びの場合です)

以上、flexboxの使い方を紹介しました。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。
 

田島悠介

それぞれの状態で画面のサイズを変えたりして色々見てみよう。

大石ゆかり

こうすると横並びが簡単にできますし、折り返しなどの設定もすごくやりやすいですね。

田島悠介

このような複数のコンテンツのレイアウトにFlexコンテナはとても有効なので、積極的に使ってみよう。

大石ゆかり

そうですね、やってみます。ありがとうございました!

 

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。