CSS3 box-flex - doosgrootte verschilt afhankelijk van de inhoud van de doos

Kan iemand me vertellen wat ik hier fout doe? Ik wil dat de dozen EXACT dezelfde breedte hebben tussen zowel divA als divB. Alleen omdat divB box iets langere tekst heeft in 'p2' mag de breedte van de hele box niet veranderen. Ik wil geen harde pixelbreedtes gebruiken voor de 'p1', zodat deze flexibel kan zijn voor viewport-breedten. Ik wil alleen dat de p1-box altijd de helft van p2 is, ongeacht de inhoud. Kan iemand me helpen of een betere methode voorstellen?

<!DOCTYPE HTML>
<html>
<head>

</head>
<body>

<div id='divA'>

Hello

Column 2

</div> <div id='divB'>

Hello

Why is this box larger

</div> </body> </html>
14

3 antwoord

Als je de kinderen een expliciete breedte geeft, gedragen ze zich.
De flexwaarde overschrijft deze breedten, waardoor u de gewenste lay-out krijgt. De vakken hebben alleen een waarde nodig om vanaf te starten. Zonder een gedefinieerde breedte krimpen ze naar de breedte van hun inhoud, waarna de flexwaarde wordt toegepast.

See here: http://jsfiddle.net/ZBE7r/

...
#p1, #p2 {
    width: 1px;
}
...

Het werkt alleen als ze allemaal dezelfde expliciete breedte hebben (kan elke waarde zijn: 0, 1px, 100%, etc.)

24
toegevoegd
dit moet in elke flexbox-tutorial worden opgenomen. levensreddend
toegevoegd de auteur albanx, de bron
soms (Firefox 10) werkt alleen als ik ook min-width toevoeg: 1px;
toegevoegd de auteur Gamadril, de bron

Ik heb dit citaat gevonden. Dit zou kunnen verklaren waarom het dat doet.

"That sounds like it's working as expected. The flexing is only applied after the preferred sizes of the boxes have been calculated. So in your example it sounds like the total box width adds up to something far bigger than the container width. The browser then uses to flex property to decide which boxes to squash to make them fit. Your middle box has the most flex so therefore it is squashed the most" link

1
toegevoegd

Als u de tags p verandert in div , lijkt deze te werken zoals verwacht. Het lijkt erop dat de flexbox de breedte berekent door eerst de aanvankelijke breedte van het element te controleren en vervolgens de resterende ruimte proportioneel in te vullen. Beide zijn elementen op blokniveau, dus ik weet niet zeker waarom ze anders worden afgehandeld, maar het zou je probleem moeten oplossen.

0
toegevoegd
bedankt Nate maar dat werkte ook echt niet. zelfs met div's deed het precies hetzelfde. .flex {display: -webkit-box; Breedte: 300 pixels; rand: 1px effen zwart; } # p1 {-webkit-box-flex: 1; text-align: right; rand: 1px effen rood; } # p2 {-webkit-box-flex: 1;/* Safari en Chrome */text-align: left; rand: 1px effen blauw; } </head> <body> <div class = 'flex'> <div id = "p1"> Hallo </div> <div id = "p2"> Kolom 2 </div>
<div class = 'flex'> <div id = "p1"> Hallo </div> <div id = "p2"> Waarom is dit vak groter </div> </div> </body>
toegevoegd de auteur 29er, de bron