Flexbox(Flexible Box Layout Module)とは今時のレスポンシブに対応したレイアウトスタイルです。上下中央の配置や等間隔の配置、固定幅と可変幅の配置など使い方は様々、3カラムレイアウトも組めます。IE11以降のモダンブラウザは対応しておりますので問題ないかと思います。
しかし、そろそろGrid Layoutも使われつつあります。格子状のレイアウト、ページ全体のレイアウトはGrid Layoutが有効で、横並びのレイアウトは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∞
あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...
19 Feb 2022
今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...
12 Feb 2022
Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...
22 Jan 2022
明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...
10 Jan 2022
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。