枠の中に要素を横に並べる方法

まえがき 枠いっぱいの横並び

枠の中に文字や画像などの要素を枠いっぱいに横並びにしたいときがあります。
でも思うように、横並びになってくれないときがありますね。

そんなときに、CSSの「 display : flex ; 」を使用すると要素を枠いっぱいに横並びにすることが出来ます。 また、外枠の幅に応じて自動的に折り返してくれます。
yakuyokonarabi.JPG
こんな感じを自在に(これは画像です)


1 枠いっぱいの横並び・要素が3個

外枠のサイズは、幅300px、高さ120pxの設定です。
外枠の中にある四角形のサイズは、指定していません。
事例1-1
A
B
C
このようにピッタリ枠に収まっています。
なお、余白が5px取ってあります。



今度は上の外枠幅だけを500pxに変えて、高さはそのままにしてみます。
すると・・・
事例1-2
A
B
C
すると外枠の中の要素の四角形の横幅が、外枠のサイズに合わせて自動的に変化しましたね。


2 枠いっぱいの横並び・要素が5個

外枠のサイズは、事例1-1と同じ幅300px、高さ120pxで、中の四角の数を増やしてみます。
四角形の最低幅は、80pxに設定されています。
横幅が300pxなので、横に4個は無理ですね。
事例2-1
A
B
C
D
E
するとこのようになりました。
上側には3個の四角形が入りますが、入りきらなかった2個は下側に行きます。
下側には2個なので横幅に余裕があるので自動的に横幅が広くなりました。



では、事例1-2と同じように横幅だけ500pxに拡大してみます。
すると・・・
事例2-2
A
B
C
D
E
外枠の横幅500pxに対して、最低幅が80px×5個=400pxなので5個が収まりました。


3 枠いっぱいの横並び・余白なし・他
余白がない場合はどのようになるか?
代表して事例2-1の場合で、「余白なし」を見てみましょう。
事例3-1
A
B
C
D
E
こんにちわ!
わけいです
右端の「E」にだけ、テキストを入れてみました。


事例3-1では、外枠の横幅が500px、高さ120pxになっていますがこの指定を初期値(auto)にし、最小幅の制限をなくし、外枠の内側だけに余白を5pxにしてみます。
各四角形に適当なテキストを入れてみます。
事例3-2
A
2019年11月20日
B
最新の
バージョンは
1909
です
C
Windows 10
D
E
こんにちわ!
わけいです
テキストの長さに合わせて、四角形の横幅が変化しているのが分かるかと思います。
また、事例1-1~事例3-1までは横幅が固定されていていましたが、事例3-2は見る環境に合わせて、伸縮しているはずです。
さらに、「B 最新の バージョンは 1909 です」は5行になって、本来なら外枠に納まりきらないはずですが、外枠と中の四角形の高さが自動的に高くなっています。


5 事例1-1のソース

事例1-1のHTMLのソース
<div class="flexbox01">
  <div class="ca">A</div><div class="cb">B</div><div class="cc">C</div>
</div>


事例1-1のCSSのソース
/* ----- flexコンテナ ----- */
.flexbox01{
    /* 外枠 */
  display              : flex;
  flex-flow            : row wrap;    /* 横方向の折り返し */
  /* 縦位置中央 */
  -webkit-align-content: stretch;       /* Safari etc. 用*/
  -ms-align-content    : stretch;       /* IE Edge 用   */
  align-content        : stretch;
/* 背景色・幅・高さ・余白 */
  background: #d4ddf8;
  width     : 300px;
  height    : 120px;
  margin    : 10px;
  padding   : 5px;
}
/* 中の四角形 */
.flexbox01 > div{
    flex-grow         : 1;      /* 幅に合わせて延伸 */
    margin     : 5px;  /* 外余白 */
    min-width  : 80px; /* 最小幅 */
    color      : #fff;  /* 文字色 */
    text-align : center;
    line-height: 30px;
}
/* 四角形の背景色 */
.ca{background: royalblue;}
.cb{background: mediumaquamarine;}
.cc{background: darkkhaki;}
.cd{background: darkorange;}
.ce{background: salmon;}


CSSを記述する場所
今回はCSSの「 display : flex ; 」についての説明でしたが、
そもそも、そのCSSをどこにどのように記述するのか?と思う方もおられると思います。

以前CSSの関する記事で、触れたことがありますが、時間が経過したので改めて紹介します。
大きく分けると2つの方法があります。
ブログの各記事の中に、あたかもHTMLを記述するかの如く、記述する方法です。内部ファイル形式ですね。

各ブログ記事とは別な「外部ファイル」に記述する方法です。外部ファイル形式ですね。

①内部ファイル形式に関して
今回の記事の様に何度も繰り返して利用することがないスタイルは、各ブログ記事の中に記述します。
記述する際は、<style> ~ </style>の間にCSS言語そのものを記述します。

外部からは見えませんので、ブログの冒頭でも、途中でも、下部でもどこにでも記述できます。
内部ファイル形式のメリットは、ブログ記事によってスタイル(CSS)を自由に変えることが出来る点です。
このCSSの部分を如何様に変更しても他の記事には一切影響しないです。

また、色々な解説では<head> ~ </head>部分に記述すると書かれていますが、少なくともウェブリブログではどこに記述しても問題ないですし、何度も<style> ~ </style>が登場しても、それが分散していても問題ありません。


②外部ファイル形式に関して
②はさらに3つに分類できると思います。

②-1 誰でもリンクさえ貼れば使えるように公開されているCSS外部ファイルを使用する方法。②-2の汎用型ですね。

②-2 自分のホームページ専用に、ホームページをアップしたホルダーなどに保存して、リンクして使用する方法。②-1の限定版ですね。

②-3 ウェブリブログなどのように、ブログ記事とは別の指定された場所に基本的なCSSファイルが用意されていて、必要に応じてそのファイルに追加・修正を行う方法です。②-2のウェブリブログ版ですね。

ウェブリブログでの現実的な利用は、②-3の方法になります。
ログイン後の画面に「デザイン」があって、ここから色々なデザインを選べるようになっていますが、実はこの行為は前もって用意されている色々なCSSから「気に入ったCSS」を選んでいる状態なのです。
さらに、その選んだCSSを少し編集するのもOK、そのまま使ってもOKになっている状態なのですね。


外部ファイル形式のCSSのメリットは、色々な記事で何度も使う可能性のあるスタイルを1度記述しておけばOKという点です。
このCSSは全ての記事に共通に反映されますので、ブログ全体のスタイルが統一出来ます。
このCSS修正すると、このスタイルを使っている全部の記事に即座に反映されます。

新たに追加した場合は、何という名前を使って追加したかが分からないと使うことが出来ませんので、メモしておく必要があります。
(私にはメモは必須ですが、記憶できる方は不要ですね。)



※①の方法も②の方法も共通ですが、メリットは使いようによってはデメリットであり、逆にデメリットは使いようによってはメリットであるということです。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 52

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント