ウィンドウの大きさ変更に伴って、ボックスの列数を自動変化させる方法

初心者です。
以下のことで困っております。
どなたか教えていただければ幸いです。
どうぞよろしくお願いいたします。

前提・実現したいこと

bootstrapを使って（実現不可能なら使わなくても良いのですが）、添付写真のように、
通常ウィンドウのときは、ボックス要素が横に3列並び、
ウィンドウを小さくしたときは、ボックス要素が縦に3つ並ぶようにしたいです。
※各要素と要素の間には（両端も）余白が空いた状態にしたいです。

該当のソースコード

HTML
1<div class="container-fluid">
2  <div class="row justify-content-around">
3    <div class="col-1"></div>
4      <div class="col-md-3 text-center" style="background: red; height: 200px; font-size:100px; line-height:200px;">A</div>
5      <div class="col"></div>
6      <div class="col-md-3 text-center" style="background: yellow; height: 200px; font-size:100px; line-height:200px;">B</div>
7      <div class="col"></div>
8      <div class="col-md-3 text-center" style="background: blue; height: 200px; font-size:100px; color:white; line-height:200px;">C</div>
9      <div class="col-1"></div>
10  </div>
11</div>

試したこと

自分なりに調べて上記ソースコードを書いてみましたが、うまく縮みませんでした。
※bootstrapは<head>タグの中に記述済みです。

補足情報（FW/ツールのバージョンなど）

使用OS：Windows10（※Mac10.14.5の中に仮想空間を作り、Windowsをインストールしています）
統合開発環境：Visual Studio2019
表示ブラウザ：Microsoft edge

★ウィンドウの幅が最大のときの動作イメージ

★ウィンドウの幅を小さくしたときの動作イメージ

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrapよりcssを直で書いた方が簡単でわかりやすいと思うので、
以下その説明を記述します。

※これはあくまで個人的な意見ですが、Bootstrapなどのライブラリは
便利な反面HTMLファイルへの記述が多く煩雑になるため初学者にはあまり向いてない気がします。
（CSSの構造も理解しづらいですし）
ある程度知見を深めてから時間短縮などの目的で導入するのはアリだと思っています。
もちろん、その方自身がそもそもCSSの知見など不要だと言う場合は話が変わりますが。

これが基本のHTML構造として話をすすめます。

<div class="Container">

  <div class="Box Box--A">A</div>
  <div class="Box Box--B">B</div>
  <div class="Box Box--C">C</div>

</div>

これだけでABCは縦並びにはなるので
スマホ用レイアウトは一旦これでよしとします。

次に、デスクトップ用レイアウトですが、
「.Container」に「display:flex」を指定します。

これは簡単に言うと、ある要素（ここではContainer）の
子要素のレイアウトを制御するプロパティです。

「display:flex」が指定されているセレクタに、
「flex-direction:row」を指定すると横並びに、
「flex-direction:column」を指定すると縦並びにできます。

「display:flex」を指定した時点で
「flex-direction:row」が初期値として設定されるため、
横並びのままでよいなら「flex-direction:row」は記述してもしなくても一緒です。

あとは、”どのタイミングでレイアウトが切り替わるか”のポイントを設定します。
※これを「ブレイクポイント」と言います。

今回は900pxとします。

以下のように記述します。

/*-------------------------------------
通常（スマホ）のスタイル
--------------------------------------*/

.Container{
  background : #eee ;
}

/*ABCボックス共通*/
.Box{
  width : 150px ;
  height : 100px;
  line-height : 100px ;
  color: #fff ;
  font-size : 50px ;
  text-align : center ;
  border : solid 1px #000 ;
}

.Box--A{
  background : red;
}
.Box--B{
  margin : 40px 0 ;
  color : #000 ;
  background : yellow ;
}
.Box--C{
  background: blue ;
}


/*-------------------------------------
デスクトップのスタイル
--------------------------------------*/
@media screen and (min-width : 900px){
 .Container{
   display : flex ;
 }
 .Box--B{
    margin : 0 40px ;
  }
}

@media screen and (min-width : 900px)

これは、「ブラウザの横幅が最小値900pxまで（＝900px以上なら）{}内のCSSを適用する」
という趣旨の記述です。

投稿2019/07/28 03:05

編集2019/07/28 12:20

Snpy

総合スコア139

Eltk

2019/07/28 06:46

ご回答、ありがとうございます！教えていただいたコードをそのままコピペしてみたのですが、うまく、縮まりません。。一つ一つの要素に幅を持たせたりする必要はありますか？

Snpy

2019/07/28 12:22

コードに追記しました。僕のブラウザでは正しく動作しているのでこれで動かない場合はどこか別に原因があります。 flex自体は幅がなくても効きます。 takumi0610さんのおっしゃる「縮まらない」という状態がどのような状態なのかがよくわかりませんが、新しく修正したコードは質問にある画像をなるべく忠実に再現しています。改めてこれで試してみてください。

Eltk

2019/07/28 13:39

ありがとうございます。今、コードを追記して再確認しましたところ、うまく動作しました！ ※ウィンドウをつかんだ状態で伸縮させている間は変わらなかったのですが、離すと、縦に並びました。仮想空間上で動かしているwindowsなので、色々と問題があるのかもしれません。助かりました！ありがとございました！

行動規範の内容に同意します