Css flexbox split parent to screen width

Question

Css flexbox split parent to screen width

if there is something like this:

<!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 articles for small screens, for example:

text1

text2

Text3

...

for a wider one of this type:

text1 | text2

text3 | text4

...

and for the rest:

text1 | text2 | Text3

text4 | text5 | text6

but all I can get is something like this:

Is it possible to do it ONLY in CSS3? I don't want to check the width in my PHP, which generates HTML and adds each x article to a new line. I just want flexbox (parent?) To split to the width of the screen and make a new line. So I tried to provide childboxes with different screen widths.

EDIT: Correct CSS Syntax Articles may have different heights.

+1

css flexbox css3

lis 25 . '13 5:56

1

cimmanon · Accepted Answer · 2013-06-25T12:03:02+0000

, 2009 Flexbox , : wrapping flex-basis. , 2009 . flex-basis .

- , , . , Chrome, Opera IE10 (Firefox ):

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

, , :

http://cssdeck.com/labs/rnmqwlst

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

Css flexbox split parent to screen width

More articles: