Akrosブログ

BLOG

CSS flexboxを使ってみよう

今更な感じもありますが今回はCSSのFlexboxについてです。
Flexbox は CSS3 から導入されたレイアウトモジュールで、これを利用することでfloatから脱却することができちゃいます。
現在ではブラウザもほぼ対応してますのでこれからどんどん利用していきましょう。

まずはブラウザの対応状況

Can I useで確認してみるとほぼすべてのブラウザに対応していることが確認できます。
IE11だけちょっとバグがあるみたいですが・・IEなんか無くなればいいのに・・・
おっと誰か来たようなので話を戻します。
ということでもう基本的なレイアウトなら使用して問題のないレベルですね。

cani_use

Flexboxの利点

  • 親要素に指定するだけで簡単に横並びレイアウトができる
  • 横並びの要素の高さが自動で揃う
  • 上下左右の位置調整(揃え)も簡単
  • 要素の並び順もCSSで変更できる

他にもありますがざっとあげると上記のような感じです。
floatでサイズを計算し横並びにしてカラム落ちを経験した方ならこの便利さが実感できると思いますよ。

Flexboxの使い方

flexを使って横並びにしたい要素の親要素にflexを指定する

例えば

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>flexsample</title>
<style type="text/css">
.flex {
display: flex;
justify-content: space-between;
}
ul {
padding: 10px;
border: 1px solid #333;
}
li {
padding: 10px;
border: 1px solid #333;
list-style: none;
}
</style>
</head>
<body>
<ul class="flex">
<li>Home</li>
<li>サービス</li>
<li>会社概要</li>
<li>お問い合わせ</li>
</ul>
</body>
</html>

20170719_blog_img01

上記だけで図のような横並びが完成

また子要素の内容が違っていても高さが自動で揃います。
※一番長い高さに揃う

20170719_blog_img02

justify-content:水平方向の揃え

.flex {
display: flex;
justify-content: flex-start;
}

flex_start

.flex {
display: flex;
justify-content: flex-end;
}

flex_end

.flex {
display: flex;
justify-content: center;
}

flex_center

.flex {
display: flex;
justify-content: space-between;
}

flex_between

.flex {
display: flex;
justify-content: space-around;
}

flex_around

align-items:垂直方向の揃え

.flex {
display: flex;
align-items:flex-start;
}

align_flex_start

.flex {
display: flex;
align-items:flex-end;
}

align_flex_end

.flex {
display: flex;
align-items:center;
}

align_center

.flex {
display: flex;
align-items:baseline;
}

align_baseline

以上簡単なサンプルですが便利そうなのはわかっていただけたでしょうか?
今回は基本的な部分だけをご紹介しましたが使っていない方はどんどん使ってみてください。

Flexboxのまとめ

  • とりあえず横並びのレイアウトが簡単にできる
  • 要素の高さも自動で揃う
  • 水平、垂直の揃えも簡単

【名古屋駅校】WordPress基礎講座 土曜日コース開講!!
お気軽にお問い合わせ下さい♪


CONTACT

お問合せ

体験お申込み・資料請求・ご質問・
ご相談はこちらから

受付専用フリーダイヤル

フリーダイヤル 0120-941-071

受付時間:10:00〜18:00 (土日祝定休)