CSS Flexbox的休息父宽度

，如果有这样的事情：CSS Flexbox的休息父宽度

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

text4 | text5 | text6

但我能够得到的是这样的：

是否有可能只在CSS3中做到这一点？我不想检查生成HTML的PHP中的宽度，并将每一个x文章添加一行。我只想让flexbox（父级？）在屏幕宽度处断开并创建一个新行。因此我试图给儿童箱不同宽度的屏幕宽度。

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

来源

2013-06-25 lis

你润通代码是不正确的，就像你使用的方框和显示框。查看http：//blog.teamtreehouse。com/response-design-of-the-future-with-flexbox看看如何去做你正在寻找的东西 –

@PeteD代码不是*错误*，它只是使用已废弃的2009 Flexbox草案中的属性。这本身并没有错，但OP需要的部分（包装）存在于规范中，但在任何浏览器的2009实现中都不存在。否则，这里唯一的错误*是使用这些属性而不包括标准属性。 – cimmanon

@cimmanon感谢有关不推荐使用的代码的信息。我只是最近查了一下flexbox，所以我不知道它是否存在，并在2009年被弃用。 –

忽略您使用已弃用的2009 Flexbox属性这一事实，在您的示例中有两件事缺失：包装和基于Flex。在任何浏览器的2009年实施中都不存在包装，并且在该草案中根本不存在弹性基础。

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

来源

2013-06-25 12:03:02 cimmanon

我正在开发一个android应用程序，我真正的问题是android中webView的“浏览器”。例如我有一个nexus 7（7英寸（17,78厘米），1280 x 800像素，216 ppi），我想在纵向显示2列，在横向显示3个。如果它是在手机上打开的（比如我的nexus S），我只想显示1列。文章本身的宽度有很大的不同（里面有很多文字，里面没有中断），因此我做了媒体查询。我怎么能操纵你的（第一）解决方案呢？在那一刻，只有一列（非常薄而长的文章，但我希望它们像一个正方形）到处都是。 – lis

哦，我不介意使用不推荐使用的属性，这是我第一次使用flexbox，并且在（已弃用的）教程中找到了代码... – lis

仅仅因为它被弃用并不意味着它*不应该*使用，你使用你需要支持的浏览器。除了Blackberry 10（[caniuse表示iOS7将支持标准Flexbox]（http://caniuse.com/#search=flexbox）），几乎所有其他移动浏览器都只有2009年Flexbox的实施，所以你被卡住了there：这些浏览器都不支持包装，因为'box-lines：multiple'没有实现。 – cimmanon

CSS Flexbox的休息父宽度

回答

相关问题