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í