css - css flexboxは親を画面幅で分割します

Question

そのようなものがある場合：

<!DOCTYPE html>
<html lang="de">
    <head>
        <link rel="stylesheet" href="/styles/screen.css?v=737285430" media="screen, projection" />
    </head>
    <body>
        <section id="articlesShorten">
            <article class="articleShorten">
                text1
            </article>
            <article class="articleShorten">
                text2
            </article>
            <article class="articleShorten">
                text3
            </article>
            <article class="articleShorten">
                text4
            </article>
            <article class="articleShorten">
                text5
            </article>
            <article class="articleShorten">
                text6
            </article>
        </section>
    </body>
</html>

CSS:

#articlesShorten {
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;
}

.articleShorten {
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  box-flex: 0;
  border: 1px solid red;
}
@media (min-width: 1000px) {
  .articleShorten {
    width: 30%;
  }
}
@media (min-width: 600px) and (max-width: 999px) {
  .articleShorten {
    width: 40%;
  }
}
@media (max-width: 599px) {
  .articleShorten {
    width: 100%;
  }
}

このような小さな画面の記事を表示したい:

文1

テキスト2

テキスト3

...

このようなより広いものの場合：

テキスト1 | テキスト2

テキスト3 | テキスト4

...

残りは次のようになります。

テキスト1 | テキスト2 | テキスト3

テキスト4 | テキスト5 | テキスト6

しかし、私が得ることができるのは次のようなものだけです:

CSS3でのみこれを行うことは可能ですか? HTML を生成し、すべての x 記事を新しい行に追加する PHP の幅をチェックしたくありません。フレックスボックス（親？）が画面幅で壊れて新しい行を作成するだけです。したがって、子ボックスに画面幅の異なる幅を与えようとしました。

編集:正しい CSS 構文記事の高さが異なる場合があります!!

css - css flexboxは親を画面幅で分割します

1 に答える 1

Related

Reference