2017年11月28日

工藤

Flexboxを使いこなそう！-基本の書き方-

マークアップ

facebook
twitter

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。
各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。
今回はとりあず入門ということで要素を横に並べる方法をご紹介します。

1 Flexboxって？
2 子要素をならべてみよう
3 子要素を同じ割合で並べてみよう
4 子要素を違う割合で並べてみよう
5 片方は可変、片方は固定サイズで並べてみよう

Flexboxって？

Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。
今までは可変要素を同じ割合で並べたいときはcalcで計算。
横並びになっている複数個の要素の高さが不確定、かつ高さを全て一番高いものに合わせたい、なんて時にはjsを使っていたと思います。

それをFlexboxは簡単な記述で実現してくれます。

子要素をならべてみよう

とりあえず上の画像のように、横に並べてみましょう。

HTML

<div class="box">
	<div class="item">テキスト</div>
	<div class="item">テキストテキストテキスト</div>
	<div class="item">テキストテキストテキストテキストテキストテキスト</div>
	<div class="item">テキストテキストテキストテキストテキストテキスト</div>
</div>
<!--//box-->

<div class="item">テキストテキストテキスト</div>

<div class="item">テキストテキストテキストテキストテキストテキスト</div>

</div>

CSS

.box{
	display: flex;
}
.box .item{
	padding: 15px;
	background: #43A1AC;
	color: #FFF;
	margin-right: 10px;
}

.box{

display: flex;

}

.box .item{

padding: 15px;

background: #43A1AC;

color: #FFF;

margin-right: 10px;

}

DEMO

Flexboxは一見難しそうですが、とっかかりは意外と簡単です。

例えば要素を横に並べる、となったら今までは子要素に対してfloatやinline-blockなどの指定をかけていました。
Flexboxの場合は、親要素にdisplay: flex;の記述を書いてあげるだけで要素が横並びになってくれます。

今まではjsを使わないといけなかったテキストなどの分量が違う要素の高さを揃えるという面も、現状で解決してくれています。

子要素を同じ割合で並べてみよう

上の画像のように、同じ割合で要素を横に並べてみます。これも簡単にできます。

CSS

.box .item{
	flex: 1;
}

.box .item{

flex: 1;

}

DEMO

前項でご紹介したものに、flex: 1;を追加してみてください。
たった1行だけで要素が1:1の割合で並んでくれます。

子要素を違う割合で並べてみよう

次はこんな感じで2:1の割合で並べてみましょう。
前項からの応用なのでなんとなく察しはつくかなと思います。

HTML

<div class="box">
	<div class="item w2">ここは2</div>;
	<div class="item w1">ここは1</div>
</div>
<!--//box-->

<div class="item w2">ここは2</div>;

</div>

CSS

.box{
	display: flex;
}
.box .item{
	padding: 15px;
	background: #43A1AC;
	color: #FFF;
	margin-right: 10px;
}
.box .item.w1{
	flex: 1;
	background: #70A630;
}
.box .item.w2{
	flex: 2;
	background: #B859A9;
}

.box{

display: flex;

}

.box .item{

padding: 15px;

background: #43A1AC;

color: #FFF;

margin-right: 10px;

}

.box .item.w1{

flex: 1;

background: #70A630;

}

.box .item.w2{

flex: 2;

background: #B859A9;

}

DEMO

割合を2にしたいところにはflex: 2;を指定。1にしたいところにはflex: 1;を指定するだけです。
ウィンドウサイズを変えてもずっと割合は保ってくれます。

片方は可変、片方は固定サイズで並べてみよう

最後に、片方は可変、片方は固定サイズで並べてみます。

HTML

<div class="box">
	<div class="item w1">ここは可変</div>
	<div class="item w200">ここは200px</div>
</div>
<!--//box-->

<div class="item w1">ここは可変</div>

</div>

CSS

.box .item.w1{
	flex: 1;
	background: #70A630;
}
.box .item.w200{
	width: 200px;
	background:#D9A217;
}

.box .item.w1{

flex: 1;

background: #70A630;

}

.box .item.w200{

width: 200px;

background:#D9A217;

}

DEMO

固定にしたい部分は、px等でサイズを指定。可変にしたい箇所はflex: 1;を指定します。
今まではcalc等を使用していたところがこちらの記述のみで実現できるようになります。

今回はFlexboxの入門という感じでした。
まだ使ったことがないという方の参考になればと思います。

[追記] 新しい記事を書きました。

Flexboxを使いこなそう！-子要素の並び順を指定する-

執筆者：工藤[ WEBデザイナー ]

WEBデザイナー。最近はWordPressを触るのが好きです。よろしくお願いします。

WordPress

WordPressの会員限定記事配信プラグイン「Simple Analytics」をリリースしました！

WordPressのイベントカレンダープラグイン「Simple Analytics」をリリースしました！ ※この記事は2024年10月現在の情報です。目次1 Simple Analyticsとは？2 こんなお悩みにおすすめです3 Simple Analyticsでできること3.1 月別・週別アクセス数3.1.1 確認できる項目3.2 ページ別アクセス数3.3 外部サイトからのアクセス数3.4 地域・デバイス別アクセス数3.5 時間帯別アクセス数3.6 ページ毎の直帰率3. […]

2024年10月8日

WordPress

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました！

WordPressのイベントカレンダープラグイン「Limited Post Maker」をリリースしました！ ※この記事は2024年10月現在の情報です。目次1 Limited Post Makerとは？2 どんなシーンで使える？3 Limited Post Makerでできること3.1 オウンドメディア、ブログの記事を会員のみに配信3.2 会員登録・ログインフォーム3.3 会員情報の管理4 使い方について5 システム要件6 導入のお問い合わせについて Limited P […]

2024年10月8日

WordPress

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました！

WordPressのイベントカレンダープラグイン「Easy Form Maker」をリリースしました！ ※この記事は2024年10月現在の情報です。目次1 Easy Form Makerとは？2 どんなシーンで使える？3 Easy Form Makerでできること3.1 お問合せフォームを作成3.2 質問を自由に決めてアンケートフォームを作成3.3 Webサイトへの設置はショートコード1行3.4 問合せやアンケート結果をデータベースへ蓄積3.5 複数のフォームを設置するこ […]

2024年10月8日

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト

Flexboxを使いこなそう！-基本の書き方-

Flexboxって？

子要素をならべてみよう

子要素を同じ割合で並べてみよう

子要素を違う割合で並べてみよう

片方は可変、片方は固定サイズで並べてみよう

関連記事

WordPressの会員限定記事配信プラグイン「Simple Analytics」をリリースしました！

WordPressの会員限定記事配信プラグイン「Limited Post Maker」をリリースしました！

WordPressのフォームプラグイン「Easy Form Maker」をリリースしました！