Jak działa flex-flex flex CSS3?

Zacząłem ostatnio grać z Flex Box CSS3, przeczytałem wiele zasobów i sam się z nim bawiłem. Szukałem przez: http://www.w3.org/TR/css3-flexbox/Jak działa flex-flex flex CSS3?

Konkretnie mam problemy z właściwością elastycznego na elementach dziecko:

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

nie wydaje się zrozumieć, w jaki sposób negatywny-Flex prace parametrów. Pozytywny flex ma sens, ponieważ dzieli proporcjonalnie przestrzeń z elementu macierzystego na dzieci.

Ujemny flex, z tego co rozumiem, ma zmniejszać elementy, gdy przepełniają one rodzica. Jednak nie udało mi się tego uruchomić. Każde zrozumienie pomocy zostanie bardzo docenione!

Oto kod mam testuje z: 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; 
}

Źródło

2012-12-21 Sanketh Katta

W artykule z opery na flexbox ujemny Flex jest opisany jako takie:

#first { 
    flex: 1 1 400px; 
} 

#second { 
    flex: 2 3 600px; 
} 

#third { 
    flex: 1 2 400px; 
}

Wartości ujemne flex, pomimo ich nazwy, są wartościami dodatnimi - drugie wartości bezśrubowe w powyższych deklaracjach. Przychodzą one tylko pod warunkiem, że dzieci przepełnią swój kontener macierzysty w kierunku głównej osi . Działają one również jako wartości procentowe, ale tym razem określają one proporcję "kwoty przelewu" (kwoty, przez które dzieci przepełniają swój pojemnik), które zostaną odjęte od rozmiaru każdego dziecka, aby zmniejszyć rozmiar całego dziecka równy rozmiarowi elementu nadrzędnego - w efekcie, aby zatrzymać przepełnienie.

Załóżmy, że kontener nadrzędny ma 1100 pikseli wzdłuż głównej osi . W związku z tym nasze dzieci nadpisałyby je o 300 pikseli (łącznie 1400 pikseli wzdłuż osi głównej). Ponieważ ujemnych wartości Flex przedstawionych na nich:

Pierwsze dziecko dostanie 1/6th kwoty przelewu usunięto w nim, który jest 50 pikseli. Jego obliczona wartość wyniesie zatem 350 pikseli.

Drugie dziecko otrzyma z niego 1/6 wartości przelewu, czyli 150 pikseli. Jego obliczona wartość będzie zatem wynosić 450 pikseli.

Trzecie dziecko otrzyma od niego 2/6 wartości przelewu, czyli 100 pikseli. Jego obliczona wartość wynosiłaby zatem 300 pikseli.

Tak więc wyższa ujemna wartość flex powoduje mniejszy element!

Źródło: http://dev.opera.com/articles/view/flexbox-basics/

Źródło

2012-12-21 23:48:20 cimmanon

Jak działa flex-flex flex CSS3?

Odpowiedz

Powiązane problemy