flexbox和wrap屬性

我正在開發和appgap與手機。我想用flexbox在我的主應用程序區域中佈置一些按鈕。flexbox和wrap屬性

有人可以解釋爲什麼這個http://jsfiddle.net/apYLB/不包裝元素在最新的鉻？

HTML：

<div class="flex-container"> 
    <div class="flex-item">1</div> 
    <div class="flex-item">2</div> 
    <div class="flex-item">3</div> 
    <div class="flex-item">4</div> 
    <div class="flex-item">5</div> 
    <div class="flex-item">6</div> 
</div>

CSS：

.flex-container { 
    display: -webkit-box; 
    display: flex; 
    flex-wrap: wrap; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    -webkit-flex-direction: row; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -webkit-box-align: end; 
    -moz-box-align: end; 
    box-align: end; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 
    justify-content:space-around; 
    height:100%; 
} 
.flex-item { 
    margin:0 10px 25px 0; 
    width:86px; 
    border:1px solid #000; 
} 
.flex-item img { 
    max-height:80px; 
}

他們horizzontally奠定只有3個半框出現。

來源

2013-05-27 gong

下面是一個便利的圖表，用於匹配來自不同草稿的屬性/值：https：//gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon

你有很多事情不完全在這裏。首先，您將舊物業與新物業混在一起（display: -webkit-box來自2009年草案，但-webkit-flex-flow來自標準草案）。

其次，2009年的Flexbox實施中沒有一個支持box-lines: multiple，這是啓用包裝所必需的。可悲的是，幾乎所有的移動設備都只支持2009年的草案。支持現代規範的Firefox版本目前不支持包裝（flex-flow和flex-wrap是受支持的屬性，但不支持與包裝有關的值）。

第三，你有justify-content: space-around，但它的2009對應設置爲box-pack: center。中心是所有草稿的中心。

http://cssdeck.com/labs/ccamtvl5

.flex-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -ms-flex-line-pack: end; 
    -webkit-align-content: flex-end; 
    align-content: flex-end; 
    -ms-flex-pack: distribute; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    height: 100%; 
} 
@supports (flex-wrap: wrap) { /* hide from incomplete Firefox versions */ 
    .flex-container { 
    display: flex; 
    } 
}

更新：包裝現在在Firefox工作作爲版本28，但使用的現代性（不老前綴的像display: -moz-box）只有當。

來源

2013-05-27 14:23:14 cimmanon

因此無法使用它來定位android> = 2.3？我真正想要的是在一行中有3個按鈕，其餘3個在第二個中。你是否建議使用css2和float ans中心屬性？ – gong

不幸的是，沒有。居中嵌套塊列表元素對於不完整的Flexbox支持是一個相當有吸引力的回退：http://codepen.io/cimmanon/pen/lBDwu – cimmanon

Upvote，因爲我剛學到了一些新東西：'@ supports'！ –

display：-webkit-box;

你可能意思是-webkit-flex。

來源

2013-05-27 13:40:14

flexbox和wrap屬性

回答

相關問題