新宿のふわっとした文化系ウェブ制作会社です

ウェブ制作しているスタッフのゆるいメディア

  1. HOME
  2. ウェブ制作
  3. コーディング
  4. CSS
  5. display:flexを簡単に使うよ

display:flexを簡単に使うよ


2015/11/14ウェブ制作 CSS コーディング

対応ブラウザや、仕様も固まったきたこともあり「display:flex;」を使うことも多くなりました。(IE8の案件に取り組んでいますが・・・)
今回はよく使うflexを使ったレイアウトと、コピペ用のコードを使ってflexを簡単に理解して使えるようにします。

flexの基本

display:flex;は、親ボックスのCSSに記載します。
親ボックスのCSSにflexを記載することで、子ボックスが横並びになります。

flex

.oya {
display:-webkit-flex; /* safari */
display:flex; }
.ko {
/* 基本的には不要です */
}

小ボックスを折り返す

このままでは、小ボックスが親ボックスを飛び出してしまいますので、折り返す必要があります。
「flex-wrap:wrap」を追記して子ボックスが折り返すようにします。
つまり、「display:flex」と「flex-wrap:wrap」はセットで使うことがほとんどです。

flex2

.oya {
display:-webkit-flex; /* safari */
display:flex;
/*折り返し*/
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

簡単にflexを使うコピペコード

flex boxを使えるコピペ用のコードです。
flex boxを使うセレクタにコピペして、あとは不要なプロパティを削除して使います。

.oya {
display:-webkit-flex; /* safari */
display:flex;
/*折り返し*/
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*左揃え*/
-webkit-justify-content: flex-start;
justify-content: flex-start;
/*センター*/
-webkit-justify-content: center;
justify-content: center;
/*右揃え*/
-webkit-justify-content: flex-end;
justify-content: flex-end;
/*最初と最後を端にして等間隔*/
-webkit-justify-content: space-between;
justify-content: space-between;
/*等間隔*/
-webkit-justify-content: space-around;
justify-content: space-around;
/*中央配置 複数行でも中央、高さ違いは上部に合わせる*/
-webkit-align-content: center;
align-content: center;
/*中央配置 複数行では分割して中央、高さ違いは中央に合わせる*/
-webkit-align-items: center;
align-items: center;
/*ベースライン 複数行では分割してベースラインに合わせる*/
-webkit-align-items: baseline;
align-items: baseline; 
/*下配置 複数行でも下、高さ違いは上部に合わせる*/
-webkit-align-content: flex-end;
align-content: flex-end;
/*中央配置 複数行では分割して下、高さ違いは下に合わせる*/
-webkit-align-items: flex-end;
align-items: flex-end;
/*下配置 複数行でも下、右寄りになる*/
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}

下記のように不要なプロパティを削除すると、センターを適用することができます。
flex3

左・センタリング・右の並び

中央や右並びは、よく使うflexプロパティになります。

左揃え

アートボード 4

特に記載しなくもてよいですが、小ボックスが左揃えになります。

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*左揃え*/
-webkit-justify-content: flex-start;
justify-content: flex-start;
}

センタリング

アートボード 5

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*センター*/
-webkit-justify-content: center;
justify-content: center;
}

右揃え

アートボード 6

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*右揃え*/
-webkit-justify-content: flex-end;
justify-content: flex-end;
}

等間隔のレイアウト

最初と最後の子ボックスが端に配置されて等間隔に表示

一行の最初と最後(ピンクのボックス)が端に配置されて、等間隔に表示されます。
アートボード 7

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*最初と最後を端にして等間隔*/
-webkit-justify-content: space-between;
justify-content: space-between;
}

等間隔に表示

そのまま等間隔に表示されます。
アートボード 7

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*等間隔*/
-webkit-justify-content: space-around;
justify-content: space-around;
}

中央(ミドル)の配置

中央配置には「align-content:center;」と「align-items:center;」「align-items:baseline;」が使えます。
小ボックスが一行だけで、ボックスの高さが同じであれば、下記のように表示されます。

アートボードa9

子ボックスの高さがバラバラであったり、複数行になるとレイアウトが変わってきます。

align-content:center;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*中央配置*/
-webkit-align-content: center;
align-content: center;
}

複数行の場合

align-content:centerは、中央(ミドル)に配置されます。

アートボードa11

ボックスの高さが違う場合

子ボックスは、ボックスの上部に合わせて、中央に配置されます。
小ボックスに上下左右のマージンを設定すると、ブログの記事一覧などのボックスレイアウトに使いやすいですね。

アートボード12

align-items:center;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*中央配置*/
-webkit-align-items: center;
align-items: center;
}

複数行の場合

行ごとに分割されて、その中央に配置されます。

アートボードa10

ボックスの高さが違う場合

小ボックスは、中央に合わせて配置されます。
高さが違うアイテム(画像やボックス)が並べられたカールセルに使えそうですね。

アートボードb10

align-items:baseline;を使った場合

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*中央配置*/
-webkit-align-items: baseline;
align-items: baseline;
}

複数行の場合

行ごとに分割されて、尚且つベースラインに合わせられて上部に配置されるようです。

アートボードa11

ボックスの高さが違う場合

ボックスのベースラインが計算されて2行目にも影響されていくようです。

アートボード12

下の配置

下に配置する場合もいくつかのプロパティがあります。

align-content: flex-end;を使った場合

下に配置されます。子ボックスの高さが違う場合は小ボックスの上部に合わせられます。

アートボードa9

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*下配置*/
-webkit-align-content: flex-end;
align-content: flex-end;
}

align-items: flex-end;を使った場合

複数行の場合は、行数分を分割して下に配置されます。写真の横下にキャプションを配置するレイアウトに使えますね。

アートボードb9

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*下配置*/
-webkit-align-items: flex-end;
align-items: flex-end;
}

justify-content:flex-end;とalign-content: flex-end;を使った場合

flexはプロパティを掛け合わせることもできます。掛けあわせるプロパティによって色々なレイアウトが実現できます。
justify-content:flex-end;とalign-content: flex-end;を使うと下記のレイアウトになります。

アートボードc9

.oya {
display:-webkit-flex; /* safari */
display:flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
/*下配置で右寄り*/
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}

他にも、小ボックスを逆から並べたりするプロパティなども存在しますので、flexマスターを目指す方は参考サイトをご覧ください。

同じカテゴリーで人気の記事

新しい記事

あなたがチェックした記事

Category / カテゴリー

Ranking / 人気記事

  1. テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法

    テキストのドラッグ、画像のコピーを禁止して、記事をコピーさせない方法

  2. サーバーIPがブラックリストに載ってメール送信エラーになるのを解除する方法

    サーバーIPがブラックリストに載ってメール送信エラーになるのを解除する方法

  3. wordpressのリビジョンと自動保存を停止、回数制限する方法

    wordpressのリビジョンと自動保存を停止、回数制限する方法

  4. ここぞという時に頼れる神フォント(ゴシック編)

    ここぞという時に頼れる神フォント(ゴシック編)

  5. CSS GridをIE11、EDGEに対応させるために注意する点

    CSS GridをIE11、EDGEに対応させるために注意する点

  6. 4つのプラグインでWordPressの表示速度を向上させる

    4つのプラグインでWordPressの表示速度を向上させる

  7. WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

    WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

  8. ここぞという時に頼れる神フォント(明朝編)

    ここぞという時に頼れる神フォント(明朝編)

  9. headタグ内で使うmetaやlink relまとめ

    headタグ内で使うmetaやlink relまとめ

  10. WordPressのマルチブログを解除する方法

    WordPressのマルチブログを解除する方法

Recommned / お薦め

  1. HTMLやCSS、JavaScript、画像を圧縮して表示速度をアップさせる

  2. headタグ内で使うmetaやlink relまとめ

  3. キーワード調査ツール7選

  4. display:flexを簡単に使うよ

  5. 吹き出し、グラデーションなど、よく使うジェネレーターまとめ

  6. Sassコンパイル、Compass、スマフォと同期プレビューまでできる「Prepros」が凄すぎた