如果有类似的东西:
<!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 文章添加一个新行。我只希望 flex 盒(父级？)在屏幕宽度处中断并创建一个新行。因此，我尝试为子框提供不同的屏幕宽度。
编辑:正确的 CSS 语法 文章可以有不同的高度!!
最佳答案
忽略您正在使用已弃用的 2009 Flexbox 属性这一事实，您的示例中缺少 2 件事:换行和 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按屏幕宽度打破父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17290107/