bambini Flex-box ignora avvolto (compressione del margine)

Dato il seguente codice HTML:bambini Flex-box ignora avvolto (compressione del margine)

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

e il seguente CSS (prefisso gratuito):

.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

Ecco un CodePen.

A è avvolto in un <div> in modo che il margine venga ignorato.

Q: Come posso ottenere il comportamento di B per A (margine) con il modello di box flessibile?

Nota: I wrapper div possono andare più livelli di profondità

Targeting: ultima Chrome/Safari/iOS

La ringrazio molto per il vostro aiuto!

Edit: Grazie a @ josecabo mi si avvicinò con questo:

.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

Purtroppo non funziona in Safari come citato da @cimmanon, quindi ho ancora bisogno di lui lp.

fonte

2013-02-24 Stephan Bönnemann

Sapevate che API scatola è deprecato? Devi usare display: flex; api invece. –

Qual è il risultato che vuoi ottenere? Scusa, ma non ti capisco. –

@ JoséCabo Le proprietà che dovrebbero essere utilizzate * notevolmente * dipendono dal browser a cui si sta mirando. Safari, per esempio, segue una delle vecchie specifiche. – cimmanon

Finalmente ho trovato la soluzione giusta (per il mio problema specifico).

.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

sto usando display: inline-block su .inner di disabilitare margine collasso e poi compensare la larghezza perduta con width: 100%.

Tutto il merito va a cimmanon per avermi nel giusto "collasso margine di" direzione

fonte

2013-02-24 23:58:18

dovresti comunque accettare la tua risposta :) – Alp

@Alp "Puoi accettare la tua risposta in 2 giorni";) –

oh, mi dispiace. non importa :) – Alp

Quello che stai guardando in realtà non ha nulla a che fare con Flexbox, ma ciò che è chiamato collasso margine

.outer div { 
    border: 1px solid; 
}

L'aggiunta del confine ha impedito il margine di collassare. Piuttosto che fare affidamento sui margini, mi sento di raccomandare mettendo un'imbottitura sul contenitore padre:

.outer { 
    padding-top: 10px; 
}

Esempio:

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

Ora, per coprire tutti i prefissi, è necessario qualcosa di simile:

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

fonte

2013-02-24 23:14:07 cimmanon

Cerco ancora la mia soluzione perfetta in cui posso continuare ad usare il margine su ".inner". Idealmente mi piacerebbe apportare modifiche a '.inner' solo. Ma il problema del * margine di collasso * è sth. Posso costruire su Grazie mille! –

bambini Flex-box ignora avvolto (compressione del margine)

risposta

Problemi correlati