レスポンシブデザインについて

ブレイクポイントに達したら１枚目から２枚目のようにしたいです。
私のコードでは３枚目の画像のようにAとCの間ができてしまいます。

<body>
    <div class="container">
        <div class="A">A</div>
        <div class="B">B</div>
        <div class="C">C</div>
    </div>
</body>

.container {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    text-align: center;
    margin: 0 auto;
}

.inner {
    flex: 0 0 200px;
}

.A,
.B,
.C {
    flex: 0 0 200px;
    font-size: 20px;
    font-weight: bold;
}

.A {
    background: red;
    height: 200px;
}

.B {
    background: yellow;
    height: 400px;
}

.C {
    background: green;
    height: 300px;
}

Lhankor_Mhy

2021/04/05 08:37

これができそうなのは、グリッドレイアウトの masonry だけですが、今のところは Firefoxだけしか対応してないです。 https://coliss.com/articles/build-websites/operation/css/css-masonry-layouts-in-firefox.html 要素の順番が変わってもいいなら、色々方法があると思います。

genzo34

2021/04/05 10:10

返信ありがとうございます。そうみたいですね、すでに回答していただいてるものからベストアンサーにさせていただきます。

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

回答2件

ベストアンサー

隙間なく敷き詰めるというのを重視するなら、段組レイアウトでしょうか。

段組みレイアウトの使用 - CSS: カスケーディングスタイルシート | MDN

css
1.container {
2  column-width: 200px;
3  max-width: 600px;
4  column-gap: 0;
5  margin: 0 auto;
6}
7
8.A,
9.B,
10.C {
11  break-inside: avoid;
12  font-size: 20px;
13  font-weight: bold;
14}

折り返したときの並び順は質問の図とは異なります。

CodePenサンプル

投稿2021/04/04 03:17

hatena19

総合スコア34075

フレックスデザインでやることではなさそうですが
このケースだけであれば

css
1.A,.B,.C {
2  margin-bottom:-200px;
3}

投稿2021/04/03 14:13

yambejp

総合スコア116724

genzo34

2021/04/03 15:17

フレックスを使わないとなるとグリットレイアウトでしょうか？実際にレスポンシブ化したいものは高さが可変なのですがなにを使うのが適切でしょうか。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブデザインについて

関連した質問