trẻ em Flex-box lờ bọc của (biên độ sụp đổ)

Với HTML sau:trẻ em Flex-box lờ bọc của (biên độ sụp đổ)

<div class="outer"> 
    <div> 
    <div class="inner">A</div> 
    </div> 
</div> 
<div class="outer"> 
    <div class="inner">B</div> 
</div>

và CSS sau đây (prefix miễn phí):

.outer { 
    display: box; 
    box-orient: vertical; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height:  50px; 
    margin-top: 10px; 
    background: green; 
}

A and B

Đây là một CodePen.

A được gói trong <div> để lề của thẻ bị bỏ qua.

Hỏi: Làm cách nào để có thể đạt được hành vi của B đối với A (lề) với mô hình hộp flex?

Lưu ý: Các wrappers div có thể đi nhiều cấp độ sâu

Nhắm mục tiêu: Chrome mới nhất/Safari/iOS

Cảm ơn bạn rất nhiều vì sự giúp đỡ của bạn!

Edit: Nhờ @ JoséCabo tôi đến với điều này:

.outer { 
    display: flex; 
    flex-direction: column; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height:  50px; 
    margin-top: 10px; 
    background: green; 
}

CodePen

Chrome: Chrome

Safari: Safari

Đáng tiếc là nó không hoạt động trong Safari như đã đề cập bởi @cimmanon, vì vậy tôi vẫn cần một số lp.

Nguồn

2013-02-24 Stephan Bönnemann

Bạn có biết rằng hộp API bị phản đối? Bạn phải sử dụng display: flex; thay vào đó. –

Bạn muốn nhận kết quả nào? Xin lỗi, nhưng tôi không hiểu bạn. –

@ JoséCabo Các thuộc tính nên được sử dụng * rất nhiều * phụ thuộc vào trình duyệt bạn đang nhắm mục tiêu. Ví dụ, Safari theo một trong các thông số kỹ thuật cũ hơn. – cimmanon

Cuối cùng tôi đã đưa ra giải pháp đúng (cho vấn đề cụ thể của tôi).

.outer { 
    display: flex; 
    flex-direction: column; 

    height: 100px; 
    width: 100px; 

    background: red; 
    margin: 10px; 
} 

.inner { 
    height: 50px; 
    margin-top: 10px; 
    background: green; 
    display: inline-block; 
    width: 100%; 
}

CodePen

Tôi đang sử dụng display: inline-block trên .inner để vô hiệu hóa lợi nhuận sụp đổ và sau đó bù đắp cho chiều rộng bị mất với width: 100%.

Tất cả các tín dụng đi vào cimmanon đã chỉ cho tôi ở bên phải "sụp đổ lề" hướng

Nguồn

2013-02-24 23:58:18

bạn vẫn nên chấp nhận câu trả lời của bạn :) – Alp

@Alp "Bạn có thể chấp nhận câu trả lời của riêng bạn sau 2 ngày";) –

oh, xin lỗi. đừng bận tâm :) – Alp

Những gì bạn đang nhìn vào thực sự không có gì để làm với Flexbox, nhưng những gì được gọi là lề sụp đổ

.outer div { 
    border: 1px solid; 
}

Việc bổ sung biên giới đã khiến biên độ từ sụp đổ. Thay vì dựa vào lề, tôi muốn giới thiệu cách đặt một đệm trên thùng mẹ:

.outer { 
    padding-top: 10px; 
}

Ví dụ:

.wrapper { 
 
    background: #eef; 
 
    border: 1px solid darkgray; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: -1em; 
 
} 
 
    
 
.item { 
 
    flex-grow: 1; 
 
    margin: 1em; 
 
    border: 1px solid black; 
 
    padding: 1em; 
 
    min-width: 6em; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div class="wrapper"> 
 
    <div class='container'> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div> 
 
    <div class='item'>item</div>  
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Bây giờ, để trang trải tất cả các tiền tố của bạn, bạn cần một cái gì đó như thế này:

.outer { 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    height: 100px; 
    width: 100px; 
    background: red; 
    margin: 10px; 
}

Nguồn

2013-02-24 23:14:07 cimmanon

Tôi vẫn tìm giải pháp hoàn hảo của mình, nơi tôi có thể tiếp tục sử dụng lề trên '.inner'. Lý tưởng nhất là tôi chỉ muốn thay đổi thành '.inner'. Nhưng điều * margin sụp đổ * là sth. Tôi có thể xây dựng. Cảm ơn nhiều! –

trẻ em Flex-box lờ bọc của (biên độ sụp đổ)

Trả lời

Các vấn đề liên quan