Flex-box ignoruje owinięty zabaw (margines upadek)

Biorąc pod uwagę następujące HTML:Flex-box ignoruje owinięty zabaw (margines upadek)

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

oraz następujące CSS (prefix darmo):

.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

Oto CodePen.

A jest zawinięty w <div>, więc margines zostanie zignorowany.

P: Jak mogę uzyskać zachowanie B dla A (margines) w modelu flex box?

Uwaga: div owijarki może przejść wiele poziomów głębokie

Kierowanie: najnowszy Chrome/Safari/iOS

Dziękuję bardzo za pomoc!

Edit: Dzięki @ JoséCabo wymyśliłem to:

.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

Niestety to nie działa w Safari jak wspomniano przez @cimmanon, więc nadal potrzebuję go lp.

Źródło

2013-02-24 Stephan Bönnemann

Czy wiesz, że skrzynka API jest przestarzała? Musisz użyć wyświetlacza: flex; zamiast tego api. –

Jaki jest wynik, który chcesz uzyskać? Przepraszam, ale cię nie rozumiem. –

@ JoséCabo Właściwości, które powinny być używane * znacznie *, zależą od tego, która przeglądarka jest kierowana. Safari, na przykład, podąża za jedną ze starszych specyfikacji. – cimmanon

W końcu znalazłem właściwe rozwiązanie (z mojego konkretnego problemu).

.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

Używam display: inline-block na .inner wyłączyć margines zawaleniem, a następnie zrekompensować utraconej szerokości z width: 100%.

Wszystko zasługa cimmanon dla wskazujące mnie w kierunku prawego marginesu „zapaść”

Źródło

2013-02-24 23:58:18

powinieneś zaakceptować odpowiedź tak czy inaczej :) – Alp

@Alp "Możesz zaakceptować własną odpowiedź w ciągu 2 dni";) –

oh, przepraszam. nieważne :) – Alp

Co szukasz w rzeczywistości nie ma nic wspólnego ze schematu flexbox, ale co się nazywa margines upadek

.outer div { 
    border: 1px solid; 
}

Dodanie granicy uniemożliwił marginesu z zawaleniem. Zamiast polegać na marginesie, polecam umieszczenie wyściółkę na kontenerze nadrzędnym:

.outer { 
    padding-top: 10px; 
}

Przykład:

.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>

Teraz na pokrycie wszystkich prefiksów, trzeba coś takiego:

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

Źródło

2013-02-24 23:14:07 cimmanon

Wciąż szukam mojego idealnego rozwiązania, w którym mogę dalej używać marginesu na '.inner'. Idealnie chciałbym wprowadzić zmiany tylko do '.inner'. Ale * załamanie marży * jest coś. Mogę na tym opierać. Dziękuję Ci bardzo! –

Flex-box ignoruje owinięty zabaw (margines upadek)

Odpowiedz

Powiązane problemy