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!!

标签： css flexbox

1条回答

霸刀☆藐视天下

2楼-- · 2020-04-28 20:09

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

0人赞添加讨论(0) 举报

css flexbox break parent by screen width

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间