2

如果有类似的东西：

<!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 并将每 x 篇文章添加一个新行的 PHP 中的宽度。我只希望 flexbox（父级？）在屏幕宽度处中断并创建一个新行。因此，我尝试为子框提供不同宽度的屏幕宽度。

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

4

1 回答 1

5

忽略您使用已弃用的 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;
}
于 2013-06-25T12:03:02.790 回答