記事作成に便利な flexbox フレックスボックス

記事作成に便利な flexbox ( フレックスボックス ) はコンテンツの横並びなどが少ないソースで簡単に実現できます。

flexbox とは

flexbox フレックスボックス とは CSS のプロパティ ( 記述 ) のひとつです。
次のようなコンテンツの横並びなどが少ないソースで簡単に実現できます。

当たり前の話ですが記事内は 1 カラムです。
普通に文章や画像を入れると次のように単に縦並びになります。紙面が単調になり勝ちで無駄な余白もできます。

flexbox を使うと次のようにコンテンツを横並びにできます。

flexbox はできることが多いので詳しい説明はこちらをご覧ください。

＜参考サイト様＞

初心者でもサイトで簡単に設定できる方法をご説明しておきます。

【 1 】CSS に次を追加する

.flexbox{display:flex;}

1	.flexbox{display:flex;}

【 2 】記事内では次のように記述する

<div class="flexbox">
<div>左側コンテンツ</div>
<div>右側コンテンツ</div>
</div>

<div>左側コンテンツ</div>

<div>右側コンテンツ</div>

</div>

もっと体裁を整えるにはもう少し CSS の追加が必要ですが、
基本的には .flexbox{display:flex;} を追加するだけです。

記事作成に便利なフレックスボックス。
覚えておくと何かと便利ですので、ぜひ勉強してみてください。

カエテングラフ WordPress テーマでは記事装飾パーツで flexbox を用意しています。
CSSの追加不要で体裁が整った flexbox がすぐに使えます。