Zobrazit použití -webkit-box v css3
Display Webkit Box Usage Css3
webkit-box
1. Než budete moci implementovat horizontální rozložení webu, je to obvykle float nebo display: inline-block, ale nemůžete dosáhnout skutečného rozložení tekutin. Alespoň šířku byste měli vypočítat sami.
2.flexiblebox může dosáhnout skutečného pocitu plynulého uspořádání. Pokud jsou uvedeny odpovídající vlastnosti, prohlížeč za nás provede další výpočty.
3.box-flex je nově přidaná vlastnost box modelu css3 a jeho vzhled může vyřešit metodu rozvržení, kterou realizujeme prostřednictvím N multi-struktury a css. Klasickou aplikací rozložení je svislý obrys, vodní průměr a proporcionální rozdělení rozložení.
Vlastnost box-flex aktuálně plně nepodporuje prohlížeče Firefox, Opera a Chrome, ale jejich soukromé vlastnosti můžete použít k definování firefox (-moz), opera (-0), chrome / safari (-webkit).
O modelu pole bylo poskytnuto několik vlastností
box-orient | Uspořádání podřízených prvků svisle (svislá řada) nebo vodorovně (vodorovná řada) |
box-flex | Poměr mezi bratrovými prvky, pouze jeden koeficient |
zarovnat rámeček | Uspořádání krabice |
krabicový směr | Směr pole |
box-flex-group | Součinitel tekutin ve skupinách |
box-řádky | |
pořadová skupina | Uspořádání podřízených prvků ve skupinách |
-moz-box-pack: konec
-webkit-box-pack: konec
Vykreslování 
Níže uvedený balíček obsahuje několik příkladů flexibilního boxu
1.1. Adaptivní rozložení se čtyřmi sloupci.
Vykreslování
1,1 html
Využití webkit-boxu v css3 . zabalit { displej: -moz-box displej: box display: -webkit-box -webkit-box-orient: horizontální / * horizontální displej * / } .child { minimální výška: 200 pixelů ohraničení: 2px pevné orangered -webkit-box-flex: 1/ * Jedna ku jedné * / okraj: 20px velikost písma: 100px váha písma: tučné rodina fontů: Georgia -webkit-box-align: center / * Centered display * / } 1 dva 3 4 |
1.2. Když je sloup nastaven na pevnou šířku, zbývajícím dvěma sloupcům lze přiřadit různé poměry (rozložení se třemi sloupci)
Vykreslování
HTML kód
Využití webkit-boxu v css3 . zabalit { display: -webkit-box -webkit-box-orient: horizontální / * horizontální * / } .child { minimální výška: 200 pixelů ohraničení: 2px oranžová -webkit-box-flex: 1 okraj: 10px velikost písma: 50px váha písma: tučné rodina fontů: Georgia -webkit-box-align: střed } .w100 {šířka: 100px} .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} 100 pixelů 1 Podíl 2 |
1.1. Níže je základní rozložení běžné webové stránky
Vykreslování
Využití webkit-boxu v css3 záhlaví, zápatí, sekce { ohraničení: 5px pevné # FFA500 rodina fontů: Georgia velikost písma: 40px zarovnání textu: na střed okraj: 20px } #doc { šířka: 80% min. šířka: 600px výška: 100% display: -webkit-box -webkit-box-orient: vertikální okraj: 0 auto } záhlaví, zápatí { minimální výška: 100 pixelů -webkit-box-flex: 1 } #obsah { minimální výška: 400 pixelů display: -webkit-box -webkit-box-orient: horizontální } .w200 {šířka: 200px} .flex1 {-webkit-box-flex: 1} .flex2 {-webkit-box-flex: 2} .flex3 {-webkit-box-flex: 3} Záhlaví šířka 200 poměr 3 Podíl 1 Zápatí |