CSS Flex項目之間的靜態填充

我想在CSS中創建一個靈活的佈局，它將根據客戶端的分辨率進行包裝。CSS Flex項目之間的靜態填充

例如，在橫向（1,024像素x寬）的ipad的，我想顯示以下內容：

enter image description here

但在縱向（600像素寬）一個劇本，我想顯示以下內容：

enter image description here

我幾乎以外的所有利潤20px的工作。我似乎無法弄清楚如何指定包裝元素的邊距。

這裏是我的代碼：

HTML：

<div class="box-row-fluid"> 
    <div class="col">Box 1</div> 
    <div class="col">Box 2</div> 
</div>

CSS：

.box-row-fluid { 
    display: -webkit-flex; 
    -webkit-flex-flow: row wrap; 
} 

.box-row-fluid > .col { 
    -webkit-flex: 1 400px; 
    background: #fff; 
}

代碼假定瀏覽器是一個有效的WebKit瀏覽器。

我將不勝感激。感謝您的時間。

來源

2012-10-15 Markus

什麼是「有效的webkit瀏覽器」？ – BoltClock

我打電話給一個最新的webkit瀏覽器，在這個瀏覽器中，完整的「有效的webkit瀏覽器」支持flexbox。 – Markus

你有沒有看過flexbox中的justify-content？我認爲這是你正在尋找的財產 – Jesse

你當然可以像下面這樣做My Fiddle（編輯background color保證金可見性）

CSS

.col:nth-child(1) { 
    margin-bottom: 20px; 
}

對於加入2 div之間的保證金水平，您可以使用@media query特定的分辨率並增加margin-right: 20px;爲另一個

說明：使用:nth-child(1)，因爲您正在使用class="col"均爲<div>

來源

2012-10-15 16:20:32

這隻適用於包裝盒的場景。當此代碼出現在寬屏幕上，並且這些框出現在彼此相鄰的位置時，方框2顯示爲高於方框1. – Markus

-1

爲什麼不包含twitter引導程序？

它會與此工作然後。

<div class="row-fluid"> 
    <div class="span6"> 
     Content box 1 
    </div> 
    <div class="span6"> 
     Content box 1 
    </div> 
</div>

你需要包括的唯一東西是「網格系統」非常小，並且效果很好！

來源

2012-10-15 16:20:36 erik

他已經擁有了Flexbox的功能，並且不需要額外的開銷。 – dgarbacz

CSS Flex項目之間的靜態填充

回答

相關問題