Wie funktioniert CSS3 Flexbox Negativ-Flex?

Ich habe vor kurzem angefangen, mit der CSS3 Flex Box herumzuspielen, ich habe viele Ressourcen durchgelesen und habe selbst damit herumgespielt. Ich habe durchgesehen: http://www.w3.org/TR/css3-flexbox/Wie funktioniert CSS3 Flexbox Negativ-Flex?

Insbesondere Ich habe Probleme mit der Flex-Eigenschaft auf die untergeordneten Elemente:

flex: <positive-flex> <negative-flex> <preferred-size>

ich nicht zu verstehen scheinen, wie die negativen-flex Parameter funktioniert. Der Positiv-Flex ist sinnvoll, da er den Raum anteilig vom Elternelement an die Kinder verteilt.

Der Negativ-Flex, von dem ich verstehe, soll Elemente verkleinern, wenn sie das Elternteil überlaufen. Allerdings konnte ich dies nicht zur Arbeit bringen. Jede Hilfe Verständnis würde sehr geschätzt werden!

Hier ist der Code, den ich mit dem Testen habe: http://jsfiddle.net/nxzQQ/2/

HTML:

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 

<div id="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</body> 
</html>

CSS:

#container { 
    width: 100%; 
    height: 200px; 

    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-direction: row; 
    flex-direction: row; 
} 

#container > :nth-child(1) { 
    background-color: red; 

    -webkit-flex: 1 0 0px; 
    flex: 1 0 0px; 
} 

#container > :nth-child(2) { 
    background-color: blue; 

    -webkit-flex: 2 0 0px; 
    flex: 2 0 0px; 
} 

#container > :nth-child(3) { 
    background-color: orange; 

    -webkit-flex: 1 0 0px; 
    flex: 1 0 0px; 
}

Quelle

2012-12-21 Sanketh Katta

In einem Artikel von Opera auf Flexbox wird negativ flex beschrieben als wie:

#first { 
    flex: 1 1 400px; 
} 

#second { 
    flex: 2 3 600px; 
} 

#third { 
    flex: 1 2 400px; 
}

Die negativen Flex-Werte sind trotz ihres Namens positive Werte - die zweiten einheitenlosen Werte in den obigen Deklarationen. Diese kommen nur ins Spiel, wenn die Kinder ihren übergeordneten Container in der Hauptachsenrichtung überlaufen. Sie dienen auch als Verhältniswerte, aber dieses Mal sie geben den Anteil des "Überlaufbetrags" an (der Betrag, den die Kinder ihren Behälter überlaufen lassen), der von der Größe jedes Kindes abgezogen wird, um die Gesamtgröße herunterzubringen gleich der Größe des Elternteils - in der Tat, um den Überlauf zu stoppen.

Nehmen wir an, dass der übergeordnete Container 1100 Pixel entlang der Hauptachse ist. Dies ist der Fall, unsere oben genannten Kinder würden es über 300 Pixel überlaufen (sie entsprechen insgesamt 1400 Pixel entlang der Hauptachse). Da der negativen flex Werte auf sie gesetzt:

Das erste Kind würde 1/6 des Überlaufmenge von ihm entfernt bekommen, die 50 Pixel. Sein berechneter Wert wäre daher 350 Pixel.

Das zweite Kind würde 3/6 der Überlaufmenge davon entfernen, die 150 Pixel ist. Sein berechneter Wert wäre daher 450 Pixel.

Das dritte Kind würde 2/6 der Überlaufmenge davon entfernen, die 100 Pixel ist. Sein berechneter Wert wäre daher 300 Pixel.

So führt ein höherer negativer Flex-Wert tatsächlich zu einem kleineren Element!

Quelle: http://dev.opera.com/articles/view/flexbox-basics/

Quelle

2012-12-21 23:48:20 cimmanon

Wie funktioniert CSS3 Flexbox Negativ-Flex?

Antwort

Verwandte Themen