flexboxで簡単レイアウト

flexboxで簡単レイアウト

  • 2018-07-07  最終更新日:2018-07-07

Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、3カラムレイアウトも組めます。IE11以降のモダンブラウザは対応しておりますので問題ないかと思います。

しかし、そろそろGrid Layoutも使われつつあります。格子状のレイアウト、ページ全体のレイアウトはGrid Layoutが有効で、横並びのレイアウトはflexboxが向いているので状況に応じて使ってみましょう。


スポンサーリンク


flexbox基本例

基本的にdisplay:flexとすれば直下の子要素だけがflexスタイルになります。簡単な例です。

.flexbox-1{
	display: flex;
}
.items-1{
	width:150px;
	background-color:#eee;
	text-align:center;
	padding:5px;
	border:1px solid #999;
}
<div class="flexbox-1">
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
</div>

上記のスタイルを当てると以下のようになります。

アイテム
アイテム
アイテム
アイテム

並んで表示されていますね。

次は右のロゴを入れたパターンです。

.flexbox-1{
	display: flex;
}
.items-logo{
	margin-right: auto;
	background-color:#eee;
	padding:5px;
	border:1px solid #999;
}

.items-1{
	width:150px;
	background-color:#eee;
	text-align:center;
	padding:5px;
	border:1px solid #999;
}
<div class="flexbox-1">
	<div class="items-logo">ロゴ</div>
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
	<div class="items-1">アイテム</div>
</div>

以下のように表示されます。

アイテム
アイテム
アイテム
アイテム

今度は均等に配列させます。

.flexbox-2{
	display: flex;
	justify-content: space-between;
}
.items-2{
	width:150px;
	background-color:#eee;
	text-align:center;
	padding:5px;
	border:1px solid #999;
}
<div class="flexbox-2">
	<div class="items-2">アイテム</div>
	<div class="items-2">アイテム</div>
	<div class="items-2">アイテム</div>
	<div class="items-2">アイテム</div>
</div>

上記のスタイルを当てると以下のようになります。均等に並びましたね。

アイテム
アイテム
アイテム
アイテム

次は上下中央に配置する方法です。

.flexbox-3{
	display: flex;
	justify-content: center;
	align-items: center;
}
.items-3{
	width:200px;
	background-color:#eee;
	padding:5px;
}
<div class="flexbox-3">
	<div class="items-3">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>

上記のスタイルを当てると以下のようになります。上下中央に配置されましたね。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

まだまだいろいろとできますが、私は以下のゲームをやって理解しました。やりながら配置する場所を認識できるので良いかと思います。

その他参考になるサイトも載せておきます。

参考になれば幸いです。


∞Tadashi Suyama∞

css flexbox
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

css flexbox
フッターイメージ