お問い合わせはコチラから

【CSS】flexの子要素のレスポンシブ対応の簡単な書き方

サイト運営

横並びのブロックをレイアウトする場合は、display:flexを使うのが当たり前になってきています。

この時に横方向にいくつ並べるか考えてflexコンテナーの子要素の幅を指定する必要があります。

この書き方はいろいろありますが、簡単な方法がありますので、まとめておきたいと思います。

flexプロパティを使う

flexプロパティを使うと記述量が少なく、確実に動きます。

flexプロパティのパラメータ

3つの要素は、以下のような割り当てになっています。

値を3つ指定: flex-grow | flex-shrink | flex-basis

flexプロパティを使用した記述例

横方向に3つずつ並べる場合の記述になります。

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

<style>
.parent{
display:flex;
}
.child{
/*値を3つ指定: flex-grow | flex-shrink | flex-basis*/
flex:0 1 calc(100% / 3);
}

</style>

子要素を均等サイズに割り付ける場合は、

flex:0 1 幅

をflexの子要素に指定すれば、期待通りに動きます。

まとめ

flexプロパティを使うことでCSSの記述量が減りますし、指定も簡単です。

しかし、flexプロパティの並び順や意味などをいつも忘れてしまうので、まとめてみました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました