Tulajdonságok összehangolják az új titkot
Ha már elsajátította fleksboksy (és aki nem sajátította őket az elmúlt két-három év múlva?) Mert nem a probléma a központosító mindent, és általában igazítsa, ahogy szeretné. Azt már régóta ismert „mágikus” tulajdonságai indokolják-tartalom, igazítsa-tartalom, igazítsa-elemek és igazítsa-én. és mit tesz minden értéküket (nem feltétlenül emlékszik őket fejből, akkor mindig kandikál a kiságy vagy vizuális referencia :). De tudod, hogy ezekről a tulajdonságok? Mi lenne, ha azt mondanám, hogy a hatalom nem korlátozódik fleksboksami? És láttál csak egy töredéke az értékek? És hogy ezek a tulajdonságok önmagukban nem 4, és két és félszer annyi? Ha azt szeretnénk, hogy a mester minden erejüket, tanulni, és itt újkeletű műsorrácsból (CSS Rácsos elrendezés), és nem félsz a dzsungel adatok - szívesen ezt a cikket, ahol megmutatom, milyen mély a nyúl ürege W3C.
Rácsok CSS említett nem véletlenül: ez jobb, hogy fegyveres böngészők egyikét, ahol már dolgoznak (Firefox 52+, Chrome 57+ Opera 44+ és Safari 10,1 + / iOS 10.3+ Safari), és példákat a maguk teljes pompájában.
Nemcsak fleksboksy
Egy friss cikk az új lehetőségeket fleksboksov és CSS-rácsot, ha dolgoznak együtt, ez egy rövid minta az ingatlan align-én (és még egy, de erről később) a cellákra. A lenti - interaktív példát, ahol össze lehet hasonlítani magad a hatása a négy jól ismert tulajdonságait két dobozban a különböző formázási összefüggésben - fleksboksovom és gridovom:
Látod azt az általános elvet?
Az ingatlan indokolja-tartalma határozza meg, hogy mi köze van a kihasználatlan hely maradt elhelyezése után minden tartalom vízszintesen (pontosabban a nagytengely, tulajdonságaitól függően a flex-irányt fleksboksov, és a vízszintes tengelyen, attól függően, hogy az irányt a szöveget, rosták -. De amíg szorítkozunk, hogy az egyszerű eset, mint a példában). Hogy hagyja ezt a helyet a végén a húr (ez az alapértelmezett), élére (nyomja meg a tartalmat, hogy a végén), szórás egyenletesen a jobb és a bal, a tartalom (és így központosítva), szórás egyenletesen az elemek között, stb Az egyetlen különbség az, hogy a rácselemek vannak csoportosítva több vagy függőlegesen (oszlopok), így az a hely szükségszerűen megoszlik az oszlopok, és nem az elemek, mint a fleksboksov.
A ALIGN-tartalom nem lényegében ugyanaz, de a függőleges (vagy pontosabban, egy merőleges tengely fleksboksov és blokk tengely rácsok, ha egyáltalán zanudstvovat). Itt mindkét esetben a tartalom már csoportosítva - az első sorban (a fleksboksah) vagy sorozat (a grid). És a tér függőlegesen lehet elvégre ezeket a sorokat / sorok előtte, ugyanolyan előtt és után őket (és akkor lesz a közepén), egyenlő arányban elosztva a két ... A fleksboksah (ahol eltérően rácsok, sejteket nem egyértelmű méretek ) is egyenletesen nyúlik a magassága a sor / sorok úgy, hogy nem lesz szabad hely egyáltalán.
Más szóval, a tulajdonságok * -content kezeli az összes tartalmat egyszerre, húzással és nyomja (ha szükséges), akkor mi a tartalom csoportosított húrok, sorok vagy oszlopok.
Nos, igazítsa-tételek igazítja pontosan «tárgyak», azaz elemek - fleksboksa belsejében sorok és sorok a rács. És igazítsa-én - ugyanaz, de az egyes elemek külön-külön, és jelezte neki. Az első beállítja az alapértelmezett viselkedés az elemek, és a második lehetővé teszi számára, hogy felülbírálja.
De hogyan lehet összehangolni az elemek - mind (alapértelmezett), vagy valamilyen külön - belül vízszintesen az oszlopok a rács?
Nem kevesebb, mint kilenc tulajdonságok
Kiderült, hogy minden objektum igazítás - minden tartalmat. minden elem az alapértelmezett és egyetlen tagja maga is - van egy pár tulajdonságait, amelyek közül az egyik összehangolja a fő / vízszintes tengely (ebben az esetben - vízszintes), és a második - a keresztirányú / almasav (példánkban - függőleges). 6 fordul tulajdonságok - minden kombinációja a két lehetőség, amellyel összehangolni a tengelyre, és a három -, hogy egy vonalban van (tartalmi elemek vagy egy adott elem önmagában). Itt vannak:
- összehangolása-tartalom
- indokolják-tartalom
- összehangolása-tételek
- indokolják-tételek
- összehangolása-én
- indokolják-én
A fenti példában láthatjuk mind a 6 ingatlan működő hálózatok. Mindössze 4 mi régi barátok dolgozni fleksboksah: igazítsa az egyes elemek mellett a fő tengely van értelme, mivel az egész tér között már kezeli indokolja-tartalmat. és terjeszteni, miután nem volt semmi.
Tehát amellett, hogy a hat tulajdonságait most már három:
Az érték mindegyik - kombinációja align- értékek * és * justify- egy szóközzel elválasztva. Például place-tartalom: helykihasználást köztes vagy hely-self: szakaszon található. Az eljárás (első függőleges igazítás, majd vízszintes) megfelel a sorrendben, amely tartalmazza, például, a bemélyedés (a margón típusú bejegyzések: 20 képpont auto). Ha csak egy értéket (például a hely-tételek: start), akkor másolja a két komponenst mindkét tengely mentén.
Egy rakás új értékek
Ha alaposan megvizsgálta a fenti példa, akkor meglepetést egyes értékek kiegyenlítése tulajdonságait. Ezek nagyon új, és akkor érdemes egy külön történet.
kezdete és vége
A fleksboksah vagyunk szokva az értékek flex-start és flex-end. irányától függően a fő és az oldalsó tengely -, ami viszont függ az irányt a szöveget. Csak a kezdő és befejező - majdnem ugyanaz: az elején / végén a vonal, vagy a blokk (sor vagy oszlop), illetve attól függően, hogy a szöveg irányát. Vonal / sorozat írás balról jobbra Start - benne a bal szélén, vége - jobb. Írásakor jobbról balra - éppen ellenkezőleg. Ha a függőleges levél lefelé, illetve indul - ez a magasság, vége - alján. És így tovább.
A gyakorlatban a különbség a start / end és flex-start / flex-end csak, hogy a korábbi, ellentétben a második, nem veszi figyelembe a „puccs” tengely olyan helyzetekben, mint flex-flow: sor-fordított összefoglaló megfordult. És a rácsok mindannyian lényegében szinonimája.
A Firefox, ezek az értékek már dolgozik fleksboksov, és rácsokat Chrome - jelenleg csak a rácsok.
self-start és az önálló végén (* -items és * -self)
Ez a két érték a kísértés, hogy hívják „több relatív” ahelyett, hogy csak kezdetét és végét. ezek összehangolása fleks- és hálózati elemek alapján a saját szöveg területekre. Például, ha bizonyos sejtek a rács szöveg megy balról jobbra, míg mások - jobbról balra (például az orosz-arab szótár), majd indokolja-példány: self-start tartalmát az első nyomni a bal szélén, a második - a jobb oldalon. Látni lehetett, hogy a fenti példák - az utolsó előtti elem minden tartályt, a zöld szín jelzi.
A balra és jobbra
Néha azonban ritkán van szükség, hogy összehangolják valami abszolút, jobbra / balra, függetlenül attól, hogy az irányt a szöveget. Most van itt az orvosság. De ne vigyük túlzásba!
tér-egyenletesen (a * -content)
Fordította kiságy Joni Traytel velünk egy időben kellett javítanom egy pontatlanság (eredeti ez maradt mostanáig, ez volt az első, és a cikkben Chris Koyera ahonnan Joni taszító). A tér-körül készült, ha a az elemek közötti résekbe, és az élek a tartály, hogy a szélsőséges elemek egyenlő egymással:
Hogy egy ilyen eredmény ösztönösen várhatóan sokan (köztük én is), és a tényleges eredmény a tér körül (a hézagok az elemek közötti kétszer olyan széles, mint a szélei) kellemetlen meglepetéssel. A rendszeres időközönként mostanáig kellett keresni, nem triviális hack - akár tér-között, és :: előtt c :: után. vagy atipikus használata margin: auto. És ez csak egyszeri fleksboksov.
első alapvonal és az utolsó alapvonal
Igazítása az alapvonal régóta nehéz kérdés CSS, még a legnagyobb mesterek gyakran kellett folytatni vele az egész küzdelmet. Különösen meglepő, hogy egyes elemek - pl. beágyazott blokkokhoz - utolsó sor igazított alapvonal, és mások - például a. inline-table - eleinte. Most lehet, hogy ellenőrizzék kifejezetten. A viszonyítási alap, mielőtt egy kulcsszót, megadhat egy másik szót-módosítót - első vagy utolsó.
Kérjük, vegye figyelembe: módosító jelzi pontosan a hely, nem kötőjellel, hogy az ingatlanok értékét kapjuk kompozit két szóból áll. Mivel ez a rés valamivel összetévesztés elkerülése csökkentett értékek (mint köztudott, például hely-self: első alapvonal, mint érthetetlen összehangolás első tengely és összhangba hozza a alapvonal a másik, vagy mindkét szintező alapvonaltól mindkét tengelyen.?) volt még egy javaslatot, hogy a csökkentett értékeket perjel a különbség, de a végén az űrt. Tehát légy óvatos!
Ezek még nem tudtam látni akcióban minden böngésző, így először nem is akart hozzá kell adni a cikket. De azt kell :)
Talán, ha a központosító elemek egy gumi flex tartály szembesül egy ilyen kellemetlen szolgáltatás: ha a tartály egyre kevesebb elem mindkét széle az elemek elkezdenek játszani a tartályba. És ha a tartály - ez az oldal, akkor hagyja a tartalmat annak bal / felső széle és elérhetetlenné válnak. Ezzel és harcol a kulcsszó biztonságos. ha azt felveszi a központ (pl align-példány: biztonságos center;), akkor az elem középre lesz a tartályban csak ő illik. Ha ő túlterheltek a tartály, az „extra” része csak akkor járnak el jobbra és lefelé (számunkra megszokott írás iránya), ahol fel nekik legalább érhető el görgetést. Körülbelül hogyan viselkedik, ha a központosító elemek útján margin: auto. Ami, mellesleg, és szimulálja ezt a viselkedést az alábbi példát:
Van is az ellenkezője a kulcsszó nem biztonságos - mindig összehangolása / központosító elem, mint látható, nem számít, hogy hol és hogyan ugyanakkor a „többlet”. És alapértelmezés szerint a jelenlegi tervezet, legyen valami a kettő között - egy elem össze kell hangolni a leírtak szerint, de a megjelenése a tekercset, hogy minden rendelkezésére kell bocsátani neki (de elhagyták a foglalás: Ha a böngészők ne nyomják el a „smart” viselkedés - hadd tegye biztonságos :).
normális. auto kulcsszó és a régebbi
Mivel gyakran előfordul a CSS, az értékek olyan nevekkel, mint a normál és az automatikus a leginkább zavaros :). „Normál” viselkedését a tulajdonságokat, hogy összehangolják minden attól függ, az adott eljárás formázását az örökölt értékek (legacy egy módosítót csak érinti, hogy ezek örökölt értékeket figyelembe véve), és én nem is zavarja, hogy vegye fel őket a példákat (ami lehetséges volt) így egyáltalán nem keverjük össze. Ha azt szeretnénk, hogy többet megtudjon a tőlük származó lesz képes közvetlenül az előírásoknak (lásd. Alább). Szerencsére fleksboksah és hálózatok általános alapértelmezett viselkedése elv nagyon egyszerű: lehetőség van - próbálja nyúlik (stretch), a többi -, hogy nyomja meg a kezdődő megfelelő tengely (start).
Az egész modul adatok (CSS Box Alignment)
De a legnagyobb meglepetés, amely elfedi a modul -, hogy a tulajdonságok, hogy összehangolják az egész nem korlátozódik csupán fleksboksami és hálózatok: elméletben, akkor meg kell dolgozni egy többoszlopos elrendezés (by the way, a közelmúltban böngészők - a Chrome-ot a 55. változat , Firefox c 52 perc - végül eltávolítjuk előtagokat oszlop tulajdonságok) és ... Drumroll ... hagyományos blokkok !. Mi van, ha nem véletlenül csatlakoznak-tartalom: center legyen a standard oldat a legendás probléma a függőleges igazítását tetszőleges tartalommal. Sajnos, hogy indokolja-tartalom blokkok kifejezetten kiköti, hogy nem fogja alkalmazni (oh, akkor tovább kell összehangolni counterintuitive árrés -s ...), de összehangolni-tartalmat. Elméletileg a remény marad! Az elmélet szerint - mivel a böngésző (vagy a Firefox, sem a Chrome Canary) ez még mindig úgy tűnik, hogy nem működik.
Ui Azt is érdekelhetnek:
Kevesebb, mint hat hónappal a legutóbbi változás W3C munkafolyamatban, mint a vezető a konzorcium kapott javaslatot, hogy ezt az új eljárást végül az ügyben. És írd le lényegtelen HTML specifikáció a múzeumban, így nem zavart a fejlesztők, „mintha” kapcsolódnia.
Tovább CSS modul, mely azt mondták csendesen érett állapotát, amellyel a W3C azt tanácsolja, hogy indítsa el a rutinszerű használata az új termékek. tartalmazzák a tulajdonság lehetővé teszi, hogy korlátozzuk a változás a fa rajz, újrarajzoláskor CSS-dobozokat, és változtatni a méretét az elemen belül. Ezért olyan fontos, ...
TÖBB
Paris (a képen), amely a közelmúltban elfogadott CSS munkacsoport ülésén, megérkezett szórakoztató hírek: Properties grid-row-rés és rács-oszlop-szakadék, valamint a csökkentés rácsos rés ...