如果有类似的东西：
<!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
但我能得到的只是这样的：
文本1 | 文本2 | 文本3 | 文本4 | 文本5 | 文本6 | ...
是否可以仅在 CSS3 中执行此操作？我不想检查生成 HTML 的 PHP 中的宽度并将每个 x 文章添加一个新行。我只希望 flexbox（父级？）在屏幕宽度处中断并创建一个新行。因此我试图给子框不同的屏幕宽度宽度。
编辑：正确的 CSS 语法文章可能有不同的高度！
忽略您正在使用已弃用的 2009 Flexbox 属性这一事实，您的示例中缺少两件事：包装和 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;
}
如果列应该是统一的，使用 multicolumn 模块可能是一个更好的方法，它有更好的浏览器支持：
http://cssdeck.com/labs/rnmqwlst
#articlesShorten {
-webkit-columns: 10em;
-moz-columns: 10em;
columns: 10em;
}