Chèn đệm giữa CSS Flex Items

Question

Tôi đang cố gắng tạo bố cục linh hoạt trong CSS sẽ bọc theo độ phân giải của khách hàng.

Ví dụ, trên một ipad trong cảnh quan (1024px rộng), tôi muốn hiển thị như sau:

Nhưng trên playbook trong bức chân dung (600px rộng), tôi muốn để hiển thị như sau:

tôi có hầu như tất cả mọi thứ làm việc trừ lề 20px. Tôi dường như không thể tìm ra cách xác định lề cho các phần tử được bao bọc.

Đây là mã của tôi:

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; 
} 

Mã giả định rằng trình duyệt là một trình duyệt webkit hợp lệ.

Tôi sẽ đánh giá cao một số trợ giúp. Cảm ơn bạn đã dành thời gian.

Answer 1

Bạn chắc chắn có thể làm điều đó như thế này My Fiddle (Edited background color cho tầm nhìn margin)

CSS

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

Để thêm một chênh lệch giữa 2 div ngang bạn có thể sử dụng @media query cho độ phân giải đặc biệt và thêm margin-right: 20px; cho người kia

Giải thích: Sử dụng :nth-child(1) vì bạn đang sử dụng class="col" cho cả hai <div>

Answer 2

Tại sao bạn không bao gồm trình khởi động twitter?

Nó sẽ làm việc với điều này để làm việc sau đó.

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

Điều duy nhất bạn cần bao gồm là "hệ thống lưới" rất nhỏ và hoạt động tuyệt vời!