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的休息父寬度

回答

相關問題