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

我想用这样的小屏幕显示文章：

的text1

text2的

文字3

...

对于像这样的更广泛的人：

text1 | text2的

text3 |文本4

...

，其余的就像这样：

text1 | text2 |文字3

text4 | text5 | text6

但我能得到的就是这样：

是否可以仅在CSS3中执行此操作？我不想在我的PHP中检查生成HTML的宽度并将每个x文章添加到新行。我只是希望flexbox（父？）在屏幕宽度处打破并创建一个新行。因此，我试图给子框提供不同宽度的屏幕宽度。

编辑：正确的CSS语法文章可能有不同的高度!!

Answer 1

忽略您使用已弃用的2009 Flexbox属性这一事实，您的示例中缺少两件事：wrap和flex-basis。在任何浏览器的2009实现中都不存在包装，并且该草案中根本不存在flex-basis。

使用媒体查询来定义flex元素的宽度是非常不必要的，让内容确定它应该包装的位置。请注意，这仅适用于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按屏幕宽度中断父级

1 个答案: