css flexbox break parent by screen width

问题

if got something like that:

<!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%;
  }
}

I want to show the articles for little screens like this:

text1

text2

text3

...

for wider one like this:

text1 | text2

text3 | text4

...

and for the rest like this:

text1 | text2 | text3

text4 | text5 | text6

but all I'm able to get is something like this:

is it possible to do this ONLY in CSS3? I don't want to check the width in my PHP which generates the HTML and add every x article a new row. I just want that the flexbox (parent?) break at screen width and make a new row. Therefore I tried to give the childboxes different widths of the screen width.

EDIT: correct CSS Syntax The articles could have different height!!

回答1:

Ignoring the fact that you're using the deprecated 2009 Flexbox properties, there are 2 things missing in your example: wrapping and flex-basis. Wrapping doesn't exist in any browser's 2009 implementation and flex-basis doesn't exist at all in that draft.

Using media queries to define the widths of the flex elements is highly unnecessary, let the content determine where it should be wrapping. Be aware that this will only work in Chrome, Opera, and IE10 (Firefox will support it soon):

http://codepen.io/cimmanon/pen/BjtxL

#articlesShorten {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.articleShorten {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  border: 1px solid red;
}

If the columns should be uniform, using the multicolumn module might be a better way to go, and it has better browser support:

http://cssdeck.com/labs/rnmqwlst

#articlesShorten {
  -webkit-columns: 10em;
  -moz-columns: 10em;
  columns: 10em;
}

来源：https://stackoverflow.com/questions/17290107/css-flexbox-break-parent-by-screen-width

标签

css

css3

flexbox