Flexbox • a CSS
Flexbox - egy új módja annak, hogy rendezni a blokkokat az oldalon. Ez a technológia, amely kifejezetten az elrendezés elemek, ellentétben a float-ok. A flexbox elemek könnyen vízszintesen és függőlegesen irányának megváltoztatásához, és a megjelenítési sorrendben elemek meghosszabbítja a teljes magassága a blokkok szülő vagy szegező őket, hogy az alsó él.
Például, használja a keretek JsBin. Sokan közülük, így sajnos a lap lassítani egy kicsit.
A példákban csak az új szintaxist. Abban az időben az írás, a helyes, akkor jelennek meg a Chrome. Firefoxban működik részben Safari - nem működnek.
Leírás angolul itt: w3.org/TR/css3-flexbox.
Szerint a helyszínen caniuse.com. Flexbox nem támogatja a 8. és a 9. IE és az Opera Mini, de a többi böngésző nem támogatja az összes olyan tulajdonságot és / vagy szükség előtagokat.
Ez azt jelenti, hogy a technológia nem lehet széles körben használják már, de itt az ideje, hogy megismerjük őt jobban.
Először meg kell tudni, hogy a flex-elemek vannak elhelyezve a tengelyek mentén. Alapértelmezésben tárgyak vízszintesen vannak elhelyezve - mellett a fő tengely - a főtengellyel.
Azt is meg kell jegyezni, hogy ha flexbox beltéri egységek nem működnek úszó. világos és vertical-align. valamint azokat a tulajdonságokat, amelyek meghatározzák az oszlop a szövegben.
Készítsünk kizáró kísérletek:
Egy szülői egység (sárga), és 5 leányvállalata.
Kijelző: flex
És most a szülő elem egészül kijelző: flex,. Belső div-ek vannak elrendezve egy sorban (a nagytengely mentén) az oszlopok az azonos magasságú, függetlenül a tartalom.
kijelző: flex; Lehetővé teszi, hogy az összes gyerek gumi - flex. ahelyett blokk - blokk. mint eredetileg volt.
Ha a szülői egység tartalmaz képeket vagy szöveget anélkül, csomagolóanyagok, válnak névtelen flex-elemekkel.
kijelző -nak flexbox vehet két értéket:
flex - a számítás során szélessége elsőbbségi blokk elrendezés (blokk szélessége esetén elegendő tartalom jöhet ki határain túl);
inline-flex - elsőbbséget élveznek a tartalom (content rastopyrivat blokkokat a kívánt szélességet a sorokat, ha lehetséges, hely).
Flex-irányban
blokkok elrendezése irányban vezérli a Flex-irányba.
sor - sorban (alapértelmezett); sor-fordított - sorban az elemek fordított sorrendben; oszlop - az oszlop; oszlop-fordított - oszlop az elemek fordított sorrendben.
sor és sorban-reverz
oszlop és az oszlop-reverz
Az egyik vonal lehet sok blokkokat. Átruházott vagy nem határozza meg a flex-wrap tulajdon.
nowrap - blokkok nem kerülnek át (alapértelmezés); pakolás - blokkok át; csomagolja-hátra - a tömböket és elhelyezve fordított sorrendben.
nowrap. csomagolja. pakolás-reverz
A gyors- tulajdonságok Flex-irányban és a Flex-pakolás tulajdonság létezik: flex-áramlás.
Lehetséges értékek: Beállítható mindkét tulajdonság, vagy csak valaki. Például:
flex-áramlás: oszlop; flex-flow: csomagolja-fordított; flex-flow: oszlop-reverz wrap;
Az ellenőrzések az eljárás az ingatlan sorrendben.
Lehetséges értékek számokat. Ahhoz, hogy a készülék az első, hogy ez sorrendben: 1:
Indokolja-tartalom
Igazítása elemek számos tulajdonságok: indokolja-tartalmat. összehangolása-elemek és igazítsa-én.
indokolják-tartalom, és igazítsa-elemeket kell alkalmazni a szülő konténer, igazítsa-én - a gyermek számára.
indokolják-tartalom felelős a nyomvonal a főtengellyel.
Lehetséges értékek indokolják-tartalom:
Flex-start - elemek vannak a kezdetektől a fő tengely (alapértelmezett); Flex-end - a végén vannak egyvonalba állítva a fő tengelyen; központ - elemek egy vonalban vannak a központ a fő tengely; tér-között - az elemek mentén egy vonalban a fő tengelye az elosztó tér között; hely körül - elemek vonalában a fő tengelye az elosztó teret maga körül.
Igazítsa-tételek
ALIGN-tételek felelős a nyomvonal a merőleges tengely.
Lehetséges értékek összehangolása-tételek:
Flex-start - kezdete elemek vannak a tengelyre merőleges; Flex-end - végétől elemek vonalban vannak a tengelyre merőleges; központ - az elemek középre; alapvonal - elemek igazodik a kiindulási; Stretch - nyúlik elemek, elfoglal minden helyet mentén a függőleges tengely (ez az alapértelmezett beállítás).
Igazítsa-én
ALIGN-self is felelős összehangolás tengelyére merőleges, de kap egy külön Flex-elem.
Lehetséges értékek összehangolása-én:
auto - az alapértelmezett. Ez azt jelenti, hogy egy elem használja az align-elem a szülő elem; Flex-start - egy elem van igazítva tengelyére merőleges az elejétől; Flex-end - végétől az elem igazodik a tengelyre merőleges; központ - az elem középpontjában; alapvonal - elem egy vonalban van a kiindulási; Stretch - szakaszon elem, elfoglal minden helyet magasságot.
Igazítsa-tartalom
Ahhoz, hogy ellenőrizzék a igazítás belül egy multi-Flex-tartály ALIGN-tartalom tulajdonság.
flex-start - elemek vannak a kezdetektől a fő tengely; Flex-end - a végén vannak egyvonalba állítva a fő tengelyen; központ - elemek egy vonalban vannak a központ a fő tengely; tér-között - az elemek mentén egy vonalban a fő tengelye az elosztó tér között; tér-körül - elemek mentén egy vonalban a fő tengelye az elosztó tér maga körül; Stretch - elemek vannak nyújtva, hogy kitöltse a teljes magasság (alapértelmezett).
Ps: Vannak dolgok, amiket nem tudtak látni akcióban, például vonal flex-flow: oszlop wrap vagy teljes nyilvántartást azonos hajlítási irányban: oszlop; flex-wrap: csomagolja; .
Az elemek egy oszlopot, de nem kerülnek át:
Wrap nem működik, ha flex-irányban: oszlop;. bár a spec, ez így néz ki:
Szerintem idővel működni fog.