Flexbox verkennen en toepassen. CSS Grid en Flexbox: een vergelijking in de praktijk

De module Flexbox Layout (Flexible Box) is bedoeld om een ​​efficiëntere manier te bieden voor het positioneren, uitlijnen en verdelen van vrije ruimte tussen items in een container, zelfs als hun grootte onbekend en/of dynamisch is (vandaar het woord "flex").

Het basisidee achter flexlay-outs is om de container de mogelijkheid te geven om de breedte / hoogte (en volgorde) van zijn items te wijzigen om de beschikbare ruimte zo goed mogelijk te vullen (voornamelijk om op alle soorten en maten schermen te passen). Een flexbox-container breidt items uit om vrije ruimte te vullen of krimpt ze om overlopen te voorkomen.

Het belangrijkste is dat Flexbox directioneel is, in tegenstelling tot conventionele lay-outs (boxen op basis van verticale positionering en inline-elementen op basis van horizontale positionering). Hoewel ze goed genoeg werken, missen ze de flexibiliteit om grote of complexe toepassingen te ondersteunen (vooral als het gaat om heroriënteren, vergroten of verkleinen, uitrekken, verkleinen, enz.).

Opmerking. Flexbox is meer geschikt voor applicatiecomponenten en kleine lay-outs, terwijl CSS Grid voor grotere lay-outs is.

Grondbeginselen en terminologie

Omdat Flexbox een hele module is en geen aparte eigenschap, bevat het veel verschillende dingen, waaronder een hele reeks eigenschappen. Sommige hiervan zijn ontworpen om te worden ingesteld op hun container (de ouder, bekend als een "flexcontainer"), terwijl andere moeten worden ingesteld op onderliggende items (bekend als "flexitems").

Waar het conventionele lay-outsysteem gebaseerd is op doos- en inline-richtingen, is Flexbox gebaseerd op "flex-flow-richtingen". Bekijk deze afbeelding uit de specificatie om het basisidee achter Flexbox uit te leggen.

Kortom, de elementen bevinden zich langs hoofdas(van hoofdbegin tot hoofdeind) of dwarsas(van begin tot eind).

Browserondersteuning

CSS-module voor flexibele vakindeling

Chrome voor Android

De Blackberry-browser, vanaf versie 10, ondersteunt de nieuwe syntaxis.

Eigenschappen voor de container

Eigenschappen voor elementen

Eigenschappen voor bovenliggende (Flex Container)

Scherm

Definieert een flexcontainer; string of blok hangt af van de doorgegeven waarde. Bevat flex-context voor al zijn directe kinderen.

Container (display: flex; / * of inline-flex * /)

Houd er rekening mee dat CSS-kolommen geen invloed hebben op de flexcontainer.

flex-richting

Stelt de hoofdas in en bepaalt zo de richting van de elementen in de container. Flexbox is (naast de optionele wrapper) een unidirectioneel lay-outconcept. Denk aan flexitems vooral als horizontale rijen of verticale kolommen.

Container (flex-richting: rij | rij-omgekeerd | kolom | kolom-omgekeerd;)

• rij (standaard)- van links naar rechts in ltr; van rechts naar links in rtl;
• rij-omgekeerde- van rechts naar links in ltr; van links naar rechts in rtl;
• kolom- hetzelfde als rij, alleen van boven naar beneden;
• omgekeerde kolom- hetzelfde als rij-omgekeerd, alleen van onder naar boven;

flex-wrap

Standaard proberen items slechts één regel te vullen. U kunt dit gedrag wijzigen en indien nodig toestaan ​​dat elementen naar de volgende regel gaan.

Container (flex-wrap: nowrap | wrap | wrap-reverse;)

• nurap (standaard)- alle flexitems komen op één lijn te staan;
• wrap- flexitems worden op meerdere lijnen, van boven naar beneden, ingedeeld;
• omslag-omgekeerde- flexitems worden op meerdere lijnen van onder naar boven geplaatst;

rechtvaardigen-inhoud

Bepaalt de uitlijning langs de hoofdas. Dit helpt bij het verdelen van de vrije ruimte die overblijft nadat alle vaste en niet-vaste flexitems hun maximale grootte hebben bereikt. Het helpt u ook enige controle te behouden over de uitlijning van elementen wanneer ze over de lijn lopen.

Container (justify-content: flex-start | flex-end | center | space-between | space-around;)

• flex-start (standaard)- de elementen worden naar het begin van de regel gedrukt;
• flex-end- elementen worden tot het einde van de lijn gedrukt;
• centrum- items zijn gecentreerd langs de lijn;
• ruimte tussen- elementen worden gelijkmatig op de lijn geplaatst; het eerste element staat aan het begin van de regel, het laatste element staat aan het einde van de regel;
• ruimte rondom- elementen worden gelijkmatig op een lijn geplaatst met dezelfde ruimte eromheen. Merk op dat de ruimte visueel niet hetzelfde is, aangezien alle elementen aan beide zijden dezelfde ruimte hebben. Het eerste element heeft één ruimte-eenheid aan de zijkant van de container, maar twee eenheden tussen het en het volgende element, omdat het volgende element ook één eenheid aan beide zijden heeft.

align-items

Deze eigenschap bepaalt hoe flexitems zich gedragen langs de dwarsas op de huidige regel. Zie het als oh, alleen voor de dwarsas (loodrecht op de hoofdas).

Container (align-items: flex-start | flex-end | center | baseline | stretch;)

• flex-start - elementen worden aan het begin van de dwarsas geplaatst;
• flex-end - elementen worden aan het einde van de dwarsas geplaatst;
• centrum - elementen bevinden zich in het midden van de dwarsas;
• basislijn- elementen worden uitgelijnd op de baseline;
• uitrekken (standaard)- uitrekken om de hele container te vullen (respecteer nog steeds min-breedte / max-breedte);

align-content

Opmerking. Deze eigenschap heeft geen effect als er slechts één rij flexitems is.

Container (align-content: flex-start | flex-end | center | space-between | space-around | stretch;)

• flex-start- lijnen bevinden zich aan het begin van de container;
• flex-end- lijnen bevinden zich aan het einde van de container;
• centrum- lijnen worden in het midden van de container geplaatst;
• ruimte tussen- regels zijn gelijkmatig verdeeld, de eerste regel staat aan het begin van de container en de laatste regel aan het einde;
• ruimte rondom- lijnen zijn gelijkmatig verdeeld, met dezelfde afstand ertussen;
• uitrekken (standaard)- lijnen strekken zich uit over de gehele breedte om de resterende ruimte in te nemen;

Eigenschappen voor kinderen (flex items)

volgorde

Standaard zijn alle elementen in hun oorspronkelijke volgorde gerangschikt. De eigenschap order bepaalt echter de volgorde waarin elementen in de container worden gerangschikt.

Artikel (bestelling: ; }

flex-groeien

De eigenschap bepaalt het vermogen van het element om indien nodig in omvang te groeien. Het heeft een eenheidsloze waarde als een verhouding, die bepaalt hoeveel vrije ruimte in de container het element moet innemen.

Als voor alle items flex-grow is ingesteld op 1, wordt de vrije ruimte in de container gelijkmatig over alle items verdeeld. Als een van de elementen de waarde 2 heeft, dan neemt het element twee keer zoveel ruimte in beslag als de andere (het zal het in ieder geval proberen).

Artikel (flex groeien: ; / * standaard 0 * /)

Negatieve getallen kunnen niet worden opgegeven.

flex-basis

Bepaalt de standaardgrootte van het element, voordat de resterende ruimte wordt toegewezen. Het kan lengte zijn (20%, 5rem, etc.) of een trefwoord. Het auto-trefwoord betekent "lijkt op mijn eigenschap width of height". Het inhoudszoekwoord betekent "grootte is gebaseerd op de inhoud van het element" - dit zoekwoord wordt nog niet goed ondersteund, dus het is moeilijk te testen, en nog moeilijker om te weten wat zijn broers en zussen min-content, max-content en fit-content zijn aan het doen.

Artikel (flex-basis: | auto; / * standaard automatisch * /)

Indien ingesteld op 0, wordt de extra ruimte rond de inhoud niet meegeteld. Indien ingesteld op automatisch, wordt de extra ruimte toegewezen op basis van de waarde.

buigen

Dit is een afkorting voor, en. De tweede en derde parameter (flex-shrink en flex-basis) zijn optioneel. De standaardwaarde is 0 1 automatisch.

Artikel (flex: geen | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

uitlijnen-zelf

Met deze eigenschap kunt u de standaard (of eigenschap-set) uitlijning voor individuele flex-items overschrijven.

Bekijk de uitleg van de woning om de beschikbare waarden te begrijpen.

Item (align-self: auto | flex-start | flex-end | center | baseline | stretch;) .item (align-self: auto | flex-start | flex-end | center | baseline | stretch;)

Merk op dat float, clear en vertical-align geen effect hebben op het flex-item.

Voorbeelden van

Laten we beginnen met het eenvoudigste voorbeeld dat een probleem oplost dat bijna elke dag voorkomt: perfecte centrering. Het kan niet eenvoudiger als u Flexbox gebruikt.

Bovenliggend (display: flex; hoogte: 300px;) .child (breedte: 100px; hoogte: 100px; marge: automatisch;)

Het hangt af van de automatische marge van de flexcontainer die extra ruimte absorbeert. Als u dus de verticale marge instelt op automatisch voor een element, wordt het element perfect gecentreerd op beide assen.

Laten we nu nog een paar eigenschappen gebruiken. Overweeg een lijst van 6 elementen, allemaal esthetisch vast, maar ze kunnen automatisch zijn. We willen dat ze gelijkmatig verdeeld zijn langs de horizontale as en dat ze in orde zijn wanneer het formaat van de browser wordt gewijzigd (geen mediaquery's!).

Flex-container (display: flex; flex-flow: row-wrap; uitvul-inhoud: space-around;)

Klaar! Al het andere is slechts een paar ontwerpproblemen. Hieronder ziet u een voorbeeld van CodePen, ga daarheen en probeer het formaat van de vensters te wijzigen om te zien wat er gebeurt.

Laten we iets anders proberen. Stel je voor dat we een rechts uitgelijnde navigatie helemaal bovenaan het scherm hebben, maar we willen dat deze gecentreerd is op middelgrote schermen en één kolom op kleine schermen. Zo eenvoudig als taart.

Navigatie (display: flex; flex-flow: rijomslag; justify-content: flex-end;) @media all en (max-width: 800px) (.navigation (justify-content: space-around;)) @media all en (max-breedte: 500px) (.navigatie (flex-richting: kolom;))

Laten we proberen iets nog beters te doen door te spelen met de flexibiliteit van onze flex items! Wat dacht je van een mobiel-eerste lay-out met drie kolommen en een kop- en voettekst over de volledige breedte, en niet afhankelijk van de oorspronkelijke volgorde van de elementen.

Wrapper (display: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100%;) @media all en (min-breedte: 600px) (.aside (flex: 1 auto;)) @media all en (min-breedte: 800px) (.main (flex: 2 0px;) .aside-1 (volgorde: 1;) .main (volgorde: 2;) .aside- 2 (volgorde: 3;) .footer (volgorde: 4;))

Gerelateerde eigenschappen

fouten

Flexbox is zeker niet zonder fouten. De beste verzameling die ik heb gezien komt van Philip Walton en Greg Whitworth's Flexbugs Dit is een Open Source plek om alle bugs bij te houden, dus ik denk dat het het beste is om gewoon een link te plaatsen.

Flexbox-opmaakmodule ( uit het Engels Flexible Box - flexibel blok), die zich momenteel in het stadium bevindt “ Mogelijke aanbeveling»W3C-standaardisatie ( W3C Kandidaat Aanbeveling) heeft tot doel een efficiëntere manier te bieden om ruimte tussen elementen in een container te markeren, uit te lijnen en te verdelen, zelfs als hun grootte onbekend en/of dynamisch bepaald is ( daarom heette het "flexibel").

Het belangrijkste idee achter flexibele lay-outs is om de container de mogelijkheid te geven om de hoogte / breedte (en volgorde) van zijn elementen te veranderen om de beschikbare ruimte optimaal te vullen ( voornamelijk om alle soorten en maten schermen te ondersteunen).

Een flexcontainer rekt items uit om de vrije ruimte te vullen of krimpt items om te voorkomen dat ze buiten de grenzen raken.

Het belangrijkste is dat de lay-out van Flexbox richtingonafhankelijk is, in tegenstelling tot reguliere lay-outs ( blokken die verticaal zijn georiënteerd en inline-elementen die horizontaal zijn).

Hoewel gewone opmaakelementen goed werken voor pagina's, missen ze flexibiliteit ( en dit is geen woordspeling) ter ondersteuning van grote en complexe toepassingen ( vooral als het gaat om het veranderen van oriëntatie, afmetingen, uitrekken, krimpen, enzovoort).

Opmerking: Flexbox-opmaak is het meest geschikt voor toepassingscomponenten en kleine lay-outs, terwijl op rasters gebaseerde opmaak het meest geschikt is voor grootschalige lay-outs.

Basisconcepten en termen

Omdat Flexbox een hele module is en geen aparte eigenschap, bevat het veel elementen, waaronder een hele reeks eigenschappen. Sommige zijn bedoeld om te worden toegepast op een container ( een bovenliggend element dat bekend staat als een flexcontainer), terwijl andere moeten worden toegepast op kinderen ( laten we ze flex-items noemen).

Terwijl conventionele markup is gebaseerd op box- en inline-richtingen, is flex-markup gebaseerd op flex-flowrichtingen. Zie het onderstaande diagram van de specificatie om het basisidee achter flex-markup uit te leggen:

• hoofdas is de hoofdas van de flexcontainer waarlangs flexitems worden opgesteld. Wees voorzichtig, het hoeft niet horizontaal te zijn, zijn positie hangt af van de eigenschap flex-direction (zie hieronder);
• hoofdstart | main-end - flexitems bevinden zich in de container, beginnend bij het hoofdbeginpunt en bereikend het hoofdeindpunt;
• hoofdmaat is de breedte of hoogte van het flexartikel, afhankelijk van de hoofdmaat. De eigenschap hoofdgrootte kan worden ingesteld op de breedte of hoogte;
• dwarsas - de dwarsas loodrecht op de hoofdas. De richting ervan hangt af van de richting van de hoofdas.
• kruisstart | cross-end - flexlijnen worden gevuld met items en in de container geplaatst, beginnend vanaf de cross-startzijde naar de cross-endzijde;
• kruismaat - de breedte of hoogte van het flexartikel, afhankelijk van de geselecteerde afmeting. De eigenschap kan een waarde hebben van de breedte of de hoogte van de dwarsafmeting.

Eigenschappen van bovenliggende klasse (flexcontainer)

Scherm

Deze eigenschap definieert de flexcontainer: inline of block, afhankelijk van de ingestelde waarde. Het biedt ook flexibele context voor al zijn directe afstammelingen:

Container (display: flex; / * of inline-flex * /)

Merk op dat CSS-kolommen geen effect hebben in een flexcontainer.

flex-richting

Stel je voor dat flexitems voornamelijk in horizontale of verticale kolommen worden geplaatst:

Container (flex-richting: rij | rij-omgekeerd | kolom | kolom-omgekeerd;)

• rij (standaard): van links naar rechts voor ltr; van rechts naar links voor rtl;
• rij-omgekeerd: van rechts naar links voor in ltr; van links naar rechts voor rtl;
• kolom: hetzelfde als rij, maar van boven naar beneden;
• kolom-omgekeerd: hetzelfde als rij-omgekeerd, maar van onder naar boven.

flex-wrap

Container (flex-wrap: nowrap | wrap | wrap-reverse;)

• nowrap (standaard): enkele regel / van links naar rechts voor ltr; van rechts naar links voor rtl;
• wrap: multiline / van links naar rechts voor ltr; van rechts naar links voor rtl;
• wrap-reverse: multiline / rechts naar links voor ltr; van links naar rechts voor rtl.

flex-flow (geldt voor de parent van de flexcontainer)

Dit is een verkorte vorm van de eigenschappen flex-direction en flex-wrap, die samen de hoofd- en dwarsassen van een flexcontainer definiëren. De standaard is rij nowrap:

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

rechtvaardigen-inhoud

Container (justify-content: flex-start | flex-end | center | space-between | space-around;)

• flex-start (standaard): items worden uitgelijnd met het begin van de regel;
• flex-end: items worden uitgelijnd met het einde van de regel
• midden: items worden uitgelijnd op het midden van de regel;
• tussenruimte: de elementen zijn gelijkmatig verdeeld in de regel: het eerste element bevindt zich aan het begin van de regel, het laatste - aan het einde;
• space-around: items zijn gelijkmatig verdeeld op de regel met dezelfde afstand.

align-items

Container (align-items: flex-start | flex-end | center | baseline | stretch;)

• flex-start: de rand van de cross-start-items bevindt zich op de cross-start-lijn;
• flex-end: de rand van cross-start-items bevindt zich op de cross-end-lijn;
• midden: items zijn gecentreerd op de dwarsas;
• baseline: de elementen worden uitgelijnd volgens de baseline;
• stretch (standaard): elementen rekken uit om de container te vullen ( rekening houdend met min-width / max-width waarden).

align-content

Let op: deze eigenschap werkt niet als er maar één rij flexitems is:

Container (align-content: flex-start | flex-end | center | space-between | space-around | stretch;)

• flex-start: lijnen worden aan het begin van de container geplaatst;
• flex-end: lijnen worden aan het einde van de container geplaatst;
• midden: lijnen zijn in het midden van de container geplaatst;
• spatie tussen: lijnen zijn gelijkmatig verdeeld; de eerste regel staat aan het begin van de container en de laatste staat aan het einde;
• space-around: lijnen zijn gelijkmatig verdeeld op dezelfde afstand van elkaar;
• uitrekken (standaard): Lijnen worden uitgerekt om de resterende ruimte te vullen.

Onderliggende eigenschappen

(flex artikelen)

Volgorde

Artikel (bestelling: ; }

flex-groeien

Als voor alle items flex-grow is ingesteld op 1, wordt elk subitem binnen de container op dezelfde maat ingesteld. Als u een van de kinderen op 2 zet, neemt deze twee keer zoveel ruimte in beslag als de andere:

Artikel (flex groeien: ; / * standaard 0 * /)

flex-shrink

Deze eigenschap zorgt ervoor dat flexitems naar behoefte krimpen:

Artikel (flex-shrink: ; / * standaard 1 * /)

Negatieve getallen zijn niet toegestaan.

flex-basis

Deze eigenschap bepaalt de standaardgrootte van elementen voordat de resterende ruimte wordt toegewezen:

Artikel (flex-basis: | auto; / * staat standaard op automatisch * /)

buigen

Deze eigenschap is een afkorting voor de combinatie van flex-grow, flex-shrink en flex-basis. De tweede en derde parameter (flex-shrink en flex-basis) zijn optioneel. Standaardwaarden: 0 1 auto:

Artikel (flex: geen | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

uitlijnen-zelf

De beschikbare waarden zijn te vinden in de beschrijving van de eigenschap align-items:

Item (uitlijnen-zelf: auto | flex-start | flex-end | center | baseline | stretch;)

Merk op dat float, clear en vertical-align niet werken met flex-elementen.

Voorbeelden van

Laten we beginnen met een heel eenvoudig voorbeeld, waarmee we een bijna dagelijks probleem oplossen: perfecte middenuitlijning. Het kan niet eenvoudiger met flexbox:

Ouder (display: flex; hoogte: 300px; / * Of wat dan ook * /) .child (breedte: 100px; / * Of wat dan ook * / hoogte: 100px; / * Of wat dan ook * / marge: auto; / * Magisch! * / )

Dit voorbeeld is gebaseerd op het feit dat de marge-eigenschap die is ingesteld op automatisch, extra ruimte in beslag neemt. Daarom lijnt deze instelling de inspringing het element precies in het midden van beide assen uit.

Laten we nu nog een paar eigenschappen gebruiken. Stel we hebben een lijst van 6 elementen, ze hebben allemaal een vaste grootte ( voor esthetiek), maar met de optie om automatisch in te vullen.

We willen dat ze mooi zijn, gelijkmatig verdeeld langs de horizontale as, zodat wanneer het formaat van het browservenster wordt gewijzigd, alles er goed uitziet ( zonder mediaquery's te gebruiken):

Flex-container (/ * Maak eerst de flex-layoutcontext * / display: flex; / * Definieer vervolgens de stroomrichting en of we willen dat de items worden verpakt. * Onthoud dat dit hetzelfde is als: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * Nu bepalen we hoe de resterende ruimte wordt toegewezen * / rechtvaardigen-inhoud: space-around;)

Klaar! Al de rest is al een ontwerpkwestie. Hier is een demo van dit voorbeeld. Volg de link en probeer het formaat van het venster te wijzigen om te zien wat er gebeurt:

HTML:

CSS:

Flex-container (opvulling: 0; marge: 0; lijststijl: geen; weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; -webkit-flex-flow: rijomslag; rechtvaardigen-inhoud: ruimte-rond;). flex-item (achtergrond: tomaat; opvulling: 5px; breedte: 200px; hoogte: 150px; marge-top: 10px; regelhoogte: 150px; kleur: wit; lettergewicht: vet; lettergrootte: 3em; tekstuitlijning: midden;)

Laten we nog één ding proberen. Laten we zeggen dat we een rechts uitgelijnd navigatiemenu helemaal bovenaan onze website hebben, maar we willen dat het gecentreerd is op middelgrote schermen en één kolom op kleine apparaten. Alles is vrij eenvoudig:

CSS:

/ * Grote schermen * / .navigatie (weergave: flex; flex-flow: rijomloop; / * Lijn items uit met het einde van de regel langs de hoofdas * / uitvulinhoud: flex-end;) / * Middelgrote schermen * / @media all and (max-width: 800px) (.navigation (/ * Voor middelgrote schermen centreren we de elementen gelijkmatig verdelend de vrije ruimte ertussen * / rechtvaardigen-inhoud: space-around;)) / * Kleine schermen * / @media all and (max-width: 500px) (.navigation (/ * Voor kleine schermen gebruiken we kolomgewijs in plaats van rijgewijs * / flex-richting: kolom;))

HTML:

• huis
• Over ons
• Producten
• Contacten

CSS:

Navigatie (lijststijl: geen; marge: 0; achtergrond: deepskyblue; weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; -webkit -flex-flow: rijomslag; rechtvaardigen-inhoud: flex-end;) .navigatie a (tekstdecoratie: geen; weergave: blok; opvulling: 1em; kleur: wit;) .navigatie a: zweven (achtergrond: donkerder maken ( deepskyblue, 2%);) @media all and (max-breedte: 800px) (.navigation (justify-content: space-around;)) @media all and (max-width: 600px) (.navigation (-webkit- flex-flow: kolomomslag; flex-flow: kolomomslag; opvulling: 0;). navigatie a (tekstuitlijning: midden; opvulling: 10px; border-top: 1px effen rgba (255,255,255,0.3); border-bottom: 1px solid rgba (0,0,0,0.1);). Navigatie li: last-of-type a (border-bottom: geen;))

Laten we het nog beter proberen door te spelen met de "flexibiliteit" van flexitems. Wat dacht je van een mobiele lay-out met drie kolommen en een kop- en voettekst over de volledige breedte? En met de uitvoer van elementen onafhankelijk van de volgorde die door de broncode wordt gegeven:

CSS:

Wrapper (display: flex; flex-flow: row wrap;) / * Zet alle items op 100% breedte * / .header, .main, .nav, .aside, .footer (flex: 1 100%;) / * In in dit geval vertrouwen we op de oorspronkelijke volgorde om mobiele apparaten te targeten: * 1. titel * 2. navigatie * 3. hoofdtekst * 4. zijbalk * 5. footer * / / * Middelgrote schermen * / @media all en (min -breedte : 600px) (/ * Beide zijbalken staan ​​op dezelfde regel * / .aside (flex: 1 auto;)) / * Grote schermen * / @media all and (min-width: 800px) (/ * Invert the display order the eerste zijbalk en het hoofdgedeelte, en vertel het hoofdelement om maximaal twee keer zoveel ruimte in te nemen als de twee zijbalken * / .main (flex: 2 0px;) .aside-1 (volgorde: 1;) .main (bestelling : 2;) .aside-2 (volgorde: 3;) .footer (volgorde: 4;))

HTML:

CSS:

Wrapper (weergave: -webkit-box; weergave: -moz-box; weergave: -ms-flexbox; weergave: -webkit-flex; weergave: flex; -webkit-flex-flow: rijomslag; flex-flow: rijomslag ; font-weight: vet; text-align: center;) .wrapper> * (opvulling: 10px; flex: 1 100%;) .header (achtergrond: tomaat;) .footer (achtergrond: lichtgroen;) .main (tekst -align: left; background: deepskyblue;) .aside-1 (achtergrond: goud;) .aside-2 (achtergrond: hotpink;) @media all and (min-width: 600px) (.aside (flex: 1 auto; )) @media all en (min-breedte: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (order: 2;) .aside-2 (order: 3; ) .voettekst (volgorde: 4;))

Flexbox-voorvoegsels gebruiken

Flexbox vereist dat leveranciersvoorvoegsels door de meeste browsers worden ondersteund. Dit omvat niet alleen het gebruik van leveranciersvoorvoegsels vóór eigenschappen, maar ook volledig verschillende eigenschapsnamen en -waarden.

Dit komt omdat de flexbox-specificatie in de loop van de tijd is geëvolueerd, waardoor "oude", "tweener" en "nieuwe" versies zijn ontstaan.

Misschien is de beste uitweg uit deze situatie om code te schrijven met behulp van de nieuwe (en definitieve) syntaxis en de CSS door Autoprefixer te laten lopen, die rollbacks heel goed afhandelt.

Als alternatief is hieronder een Sass-methode @mixin voor hulp bij enkele voorvoegsels, die ook een idee geeft van welke actie moet worden ondernomen:

SCSS:

@mixin flexbox () (display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;) @mixin flex ($ waarden) (-webkit- box-flex: $ waarden; -moz-box-flex: $ waarden; -webkit-flex: $ waarden; -ms-flex: $ waarden; flex: $ waarden;) @mixin order ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; order: $ val;) .wrapper (@include flexbox ();) .item (@include flex (1 200px); @include order (2);)

Browserondersteuning

Verdeeld door flexbox "versies" in:

• (nieuw) - betekent ondersteuning voor de nieuwste syntaxis van de specificatie (bijvoorbeeld display: flex;

In dit artikel bekijken we de CSS Flexbox-technologie voor het maken van flexibele webpaginalay-outs.

Browserondersteuning voor CSS Flexbox

Flexbox-technologie wordt al ondersteund door bijna alle momenteel gebruikte browsers (met behulp van de voorvoegsels: IE10 +, Edge12 +, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Flexbox Basis (raster)

Flexbox is gebaseerd op een raster. Het bestaat uit slechts 2 elementen. Het eerste element is flexcontainer... Een flexcontainer wordt gemaakt door een display-CSS-eigenschap met een flex- of flex-inline-waarde toe te voegen aan het vereiste HTML-element.

Daarna alle directe kinderen van de flexcontainer(kinderen) worden automatisch flex artikelen(2 stuks flexbox rooster).

HTML-opmaak:

Flex-container (display: flex; / * flex || inline-flex * /) Opbouw van het flexbox-raster

Flexartikelen nemen standaard de volledige hoogte van de flexcontainer in beslag.

De flex of flex-inline waarde bepaalt hoe flexcontainer wordt op de pagina weergegeven. Als het moet worden gepresenteerd als: blok gebruik dan flexwaarde. Als een element moet worden weergegeven als kleine letters gebruik dan flex-inline. In dit geval neemt het zoveel ruimte op de pagina in beslag als nodig is om de elementen weer te geven.

Richting van flexitems regelen

Om de richting aan te geven waarin flexitems in een flexcontainer worden ingedeeld, gebruikt u: assen.

Markeer in flexbox 2 assen... De eerste as heet basis of de belangrijkste(standaard naar rechts gericht). De tweede is transversaal(standaard naar beneden gericht).

Items in een flexcontainer staan ​​(standaard) opgesteld, zelfs als ze geen ruimte meer hebben. Schik flexitems in een flexcontainer in de richting van de hoofdas.

Standaardlay-out van items in de container (flexibele items die geen ruimte meer hebben in de flexcontainer lopen weg)

In CSS Flexbox kun je flex-items laten wikkelen op nieuwe regels (als ze geen ruimte meer hebben op de huidige regel) door de flex-wrap-eigenschap van de CSS flex-container in te stellen op wrap of wrap-reverse.

Flex-wrap: omslag; / * nowrap (één regel - standaard) wrap (laat flex-items omlopen naar nieuwe regels) wrap-reverse (wikkel flex-items in omgekeerde volgorde in) * /

De wrap- en wrap-reverse-waarden van de flex-wrap CSS-eigenschap definiëren de richting van de dwarsas.

Het instellen van de richting van de hoofdflexbox-as wordt gedaan met behulp van de flex-direction CSS-eigenschap.

Flex-richting: rij; / * rij (rechts) - standaard rij-omgekeerd (links) kolom (omlaag) kolom-omgekeerd (omhoog) * /

Met deze eigenschap kunt u flexitems verticaal (kolommen) laten verschijnen in plaats van horizontaal (in rijen).

De eigenschappen flex-direction en flex-wrap kunnen worden gespecificeerd met behulp van de generieke CSS flex-flow-eigenschap:

Flex-flow: rij nowrap; / * 1 waarde - flex-richting, 2 waarde - flex-wrap * /

Flex-items uitlijnen

In Flexbox gebeurt het uitlijnen van items in een container in twee richtingen (assen).

Lijn flexitems uit in de richting van de hoofdas

De uitlijning van items langs de hoofdas wordt gedaan met behulp van de CSS-eigenschap rechtvaardigen-inhoud:

Justify-content: flex-start; / * flex-start (flex-items zijn uitgelijnd met de oorsprong van de as) - standaard flex-end (flex-items zijn uitgelijnd met het einde van de as) midden (naar het midden van de flexcontainer) ruimte tussen (gelijkmatig , dwz met dezelfde afstand tussen flex-items) space-around (gelijkmatig, maar met de helft van de ruimte voor het eerste flex-item en na het laatste) * / Opties voor het uitlijnen van flex-items langs de hoofdas

Lijn flexitems uit langs de dwarsas

Het uitlijnen van flex-items in een flex-container langs de richting van de dwarsas wordt gedaan met behulp van de CSS-eigenschap align-items:

Uitlijnen-items: rekken; / * stretch (rekt uit tot de volledige lengte van de dwarsas) - standaard flex-start (vanaf het begin van de dwarsas) flex-end (vanaf het einde van de dwarsas) basislijn (vanaf de basislijn) midden (naar het midden) * / Uitlijningsopties voor flexibele items langs de dwarsas

Uitlijnen van flexibele containerlijnen

Met CSS Flexbox kunt u niet alleen de flex-items zelf uitlijnen, maar ook de lijnen waarop ze zich bevinden.

Inhoud uitlijnen: stretch / * stretch (strekken over de gehele lengte van de dwarsas) - standaard flex-start (ten opzichte van het begin van de dwarsas) flex-end (ten opzichte van het einde van de dwarsas) center ( gecentreerd) tussenruimte (gelijkmatig, d.w.z. met dezelfde afstand tussen de regels) ruimte rondom (gelijkmatig, maar met de helft van de ruimte voor de eerste regel en na de laatste) * / Opties voor het uitlijnen van flexcontainerlijnen

De eigenschap align-content heeft alleen zin wanneer flexitems in een flexcontainer over meerdere regels zijn verspreid. Om dit te laten gebeuren, moet de breedte van alle flexitems groter zijn dan de breedte van de flexcontainer en ten tweede moet de flexcontainer een wrap of wrap-reverse CSS-eigenschap hebben voor de flex-wrap.

Zelf uitlijnen CSS-eigenschap

De eigenschap align-self, in tegenstelling tot de vorige (justify-content, align-items en align-content), is voor flex-items. Het stelt je in staat om te veranderen flex item uitlijning langs de richting van de dwarsas. De eigenschap align-self kan hetzelfde zijn als align-items.

Uitlijnen-items: rekken; / * automatisch (standaard) || uitrekken || flex-start || flex-end || basislijn || centrum * /

Flex-container (display: flex; breedte: 300px; hoogte: 150px; align-items: center; padding: 10px; background-color: #efefef;) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 (flex-basis: 70px; text-align: center; padding: 15px; font-size: 30px;) .flex-container_element-1 (align-self: flex-start; background: # fe4;) .flex-container_element-2 (align-self: flex-end; background: roze;) .flex-container_element-3 (align-self: stretch; background: lime;) .flex-container_element-4 (align-self: auto; background: cyaan;) Hoe de align-self CSS-eigenschap werkt

De volgorde van flexitems wijzigen

Flexitems worden standaard weergegeven in een flexcontainer in de volgorde waarin ze in de HTML-code voorkomen. U kunt de ordereigenschap gebruiken om de volgorde van sommige flexitems te wijzigen ten opzichte van andere in CSS Flexbox. Deze CSS-eigenschap rangschikt flexitems in een flexcontainer in oplopende numerieke volgorde.

Bestelling: 0; / * 0 (standaard) positief of negatief geheel getal * /

Bijvoorbeeld:

De breedte van een flexitem regelen

Flexbox heeft verschillende CSS-eigenschappen die bepalen hoe breed een flexitem mag zijn.

Flex-basis CSS-eigenschap

Deze woning is bedoeld voor: de initiële breedte van een flexitem instellen... U kunt de breedtewaarde instellen met behulp van verschillende maateenheden, zoals px,%, em, enz. Deze eigenschap is standaard ingesteld op auto (in dit geval wordt de breedte van het element automatisch berekend op basis van de inhoud) .

De uiteindelijke breedte van het flexitem wordt bepaald door: afhankelijk van de waarden van de flex-grow en flex-shrink CSS-eigenschappen die niet alleen voor dit item zijn ingesteld, maar ook voor andere flexitems in deze flexcontainer.

De flex-grow CSS-eigenschap

Deze eigenschap bepaalt of: de aanvankelijke breedte van het flexitem om te groeien (groeien)... Het vergroten van de breedte van een flex item wordt gedaan door: vrije ruimte lijn... De waarde van de flex-grow CSS-eigenschap is geheel getal... Het is deze waarde die bepaalt (als deze groter is dan of gelijk is aan 1) hoeveel vrije ruimte het flexitem voor zichzelf inneemt.

Bijvoorbeeld:

In dit voorbeeld, als de flex-items zijn uitgelijnd en er is vrije ruimte (600 × (1-0.8) = 120px):

• flex-container_element-1 voegt 1/5 van deze ruimte toe aan de breedte van het element (120 × 1/5 = 24px);
• flex-container_element-2 voegt 4/5 van die ruimte toe aan de breedte (120 × 4/5 = 96px).

Met andere woorden, met de CSS flex-grow eigenschap kun je niet alleen aangeven dat de breedte van een flex item kan groeien, maar ook instellen hoeveel dat aantal mag groeien ten opzichte van andere items.

Standaard is de CSS flex-grow eigenschap ingesteld op 0. Dit betekent dat een flex item niet kan groeien (de breedte vergroten).

De flex-shrink CSS-eigenschap

Deze eigenschap bepaalt of het flexitem in de breedte kan krimpen. Het flexartikel krimpt alleen als de lijndikte is niet voldoende om alle flexitems weer te geven daarin gevestigd. De benodigde breedte wordt berekend voor: basis van initiële breedte waarin elk flexitem zit.

Bijvoorbeeld:

De flexcontainer heeft een breedte van 500px. Het duurt 600px om flex-items weer te geven. Als gevolg hiervan ontbreekt 100px. In dit voorbeeld kunnen 2 flex-items (.flex-container_element-1 en .flex-container_element-2) krimpen. De breedte van het eerste flexitem, flex-container_element-1, zou in dit geval 300 - 1/4 * 100 = 275px zijn. De breedte van het tweede flexitem, flex-container_element-2, is in dit geval 300 - 3/4 * 100 = 225px.

Standaardwaarde:

Flex-krimp: 1;

Als je nodig hebt voorkomen dat het flex item krimpt;, dan moet het getal 0 worden opgegeven voor de eigenschap flex-shrink.

De flex CSS-eigenschap

U kunt de CSS flex-eigenschap gebruiken om flex-grow, flex-shrink en flex-basis gemakkelijk in te stellen.

Standaardwaarde:

Flex: 0 1 automatisch; / * 0 - flex-grow (1 waarde) 1 - flex-shrink (2 waarde) auto - flex-basis (3 waarde) * /

Pagina-indeling met CSS Flexbox

In deze sectie zullen we een eenvoudige responsieve Flexbox-lay-out maken.

De lay-outstructuur zal uit 3 secties bestaan:

• header (voor weergave van de header en het hoofdmenu);
• main (om het hoofdgedeelte weer te geven);
• voettekst (voor voettekst).

Het hoofdgedeelte (hoofdgedeelte) wordt op zijn beurt verdeeld in nog 2 secties (ze zullen worden gepositioneerd met behulp van CSS Flexbox). Op grote schermen (> = 992px) worden deze secties horizontaal gerangschikt en op de rest - verticaal (<992px).

Om de lay-out in de meeste browsers te ondersteunen, voegt u de nodige prefixen en max-width toe aan de CSS.

Om de doos in een flexcontainer te "veranderen", gebruiken we de row-flex-klasse. We stellen de breedte van elk flexitem (main_article en main_aside) in een flexcontainer in met behulp van de flex CSS-eigenschap.

Laten we als voorbeeld Flexbox gebruiken om het "Footer"-blok en het gedeelte "Interessant op de site" van het hoofdartikelgedeelte te markeren.

Verdeel de sectie "Footer" in 4 gelijke delen (de minimumbreedte van één deel is 200px) en de sectie "Interessant op de site" in 3 delen (de minimumbreedte van één deel is 300px).

Extra CSS:

Footer_block, .main_other_article (-webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-positief: 1; flex-grow: 1; max-width: 100%;)

Ik wil het graag hebben over FlexBox. De Flexbox layout-module (flexibele box, momenteel de W3C Candidate Recommendation) heeft tot doel een efficiëntere manier te bieden om vrije ruimte tussen elementen in een container in te delen, uit te lijnen en te verdelen, zelfs wanneer hun grootte onbekend en/of dynamisch is (vandaar het woord " flexibel").

Het belangrijkste idee van flex-lay-out is om de container de mogelijkheid te geven om de breedte / hoogte (en volgorde) van de elementen te wijzigen om de ruimte beter te vullen (in de meeste gevallen om alle soorten displays en schermformaten te ondersteunen).Een flexcontainer rekt items uit om vrije ruimte te vullen, of krimpt items om te voorkomen dat ze buiten de grenzen raken.

Het belangrijkste is dat de lay-out van flexbox richtingonafhankelijk is, in tegenstelling tot reguliere lay-outs (dozen die verticaal gaan en inline-elementen die horizontaal gaan).Hoewel een normale lay-out geweldig is voor webpagina's, mist het de flexibiliteit om grote of complexe toepassingen te ondersteunen (vooral als het gaat om het wijzigen van de schermoriëntatie, het formaat wijzigen, uitrekken, verkleinen, enz.).

Omdat flexbox is een hele module, niet slechts een enkele eigenschap, het bundelt vele eigenschappen samen.Sommige hiervan moeten van toepassing zijn op de container (het bovenliggende element, ook wel flexcontainer genoemd), terwijl andere eigenschappen van toepassing zijn op de onderliggende of flexitems.

Terwijl conventionele lay-out gebaseerd is op stroomrichtingen van blok- en inline-elementen, is flexlay-out gebaseerd op "flexibele stroomrichtingen".

Flexbox

In principe worden de elementen ofwel langs de hoofdas (van hoofdbegin tot hoofdeind) of langs de dwarsas (van dwarsbegin tot dwarseind) verdeeld.

hoofdas - De hoofdas waarlangs flexitems worden ingedeeld.Houd er rekening mee dat het horizontaal moet zijn, het hangt allemaal af van de kwaliteit van de rechtvaardige inhoud.
hoofdstart | main-end - flexitems worden in de container geplaatst van de hoofd-startpositie naar de hoofd-eindpositie.
hoofdmaat - de breedte of hoogte van het flexartikel, afhankelijk van de geselecteerde basismaat.De basisafmeting kan zowel de breedte als de hoogte van het element zijn.
dwarsas - de dwarsas loodrecht op de hoofdas.De richting ervan hangt af van de richting van de hoofdas.
kruisstart | cross-end - flexlijnen worden gevuld met items en in de container gepositioneerd vanuit de cross-start-positie en de cross-end-positie.
kruismaat - de breedte of hoogte van het flexitem is, afhankelijk van de geselecteerde afmeting, gelijk aan deze waarde.Deze eigenschap komt overeen met de breedte of hoogte van het element, afhankelijk van de geselecteerde afmeting.

Eigendommen
weergave: flex | inline-flex;

Definieert een flexcontainer (inline of blok op basis van de geselecteerde waarde), verbindt de flexcontext voor al zijn directe onderliggende items.

weergave: andere waarden | flex | inline-flex;

Onthoud:

CSS-kolomkolommen werken niet met flexcontainerzweven, wissen en verticaal uitlijnen werken niet met flexitems

flex-richting

Geldt vóór de bovenliggende van de flexcontainer.

Stelt de hoofdas in op de hoofdas, waardoor de richting wordt gespecificeerd voor flexitems die in de container worden geplaatst.

flex-richting: rij | rij-omgekeerd | kolom | omgekeerde kolom

rij (standaard): van links naar rechts voor ltr, van rechts naar links voor rtl;
rij-omgekeerd: van rechts naar links voor ltr, van links naar rechts voor rtl;
kolom: hetzelfde als rij, van boven naar beneden;
kolom-omgekeerd: vergelijkbaar met rij-omgekeerd, van onder naar boven.

flex-wrap

Geldt vóór de bovenliggende van de flexcontainer.

Bepaalt of de container eenlijnig of meerlijnig is, evenals de richting van de dwarsas, bepaalt de richting waarin nieuwe lijnen worden geplaatst.

flex-wrap: nowrap | wikkel | omslag-omgekeerde

nowrap (standaard): één regel / van links naar rechts voor ltr, van rechts naar links voor rtl;
wrap: multiline / van links naar rechts voor ltr, van rechts naar links voor rtl;
wrap-reverse: multiline / van rechts naar links voor ltr, van links naar rechts voor rtl.

flex-flow

Geldt vóór de bovenliggende van de flexcontainer.

Dit is een afkorting voor de eigenschappen flex-direction en flex-wrap, die samen de hoofdas en de dwarsas definiëren.Het staat standaard op row nowrap.

flex-flow< ‘flex-direction’> || < ‘Flex-wrap’>

rechtvaardigen-inhoud

Geldt vóór de bovenliggende van de flexcontainer.

Bepaalt de uitlijning ten opzichte van de hoofdas.Helpt bij het toewijzen van vrije ruimte in het geval dat lijnelementen niet "uitrekken" of uitrekken, maar hun maximale grootte al hebben bereikt.Het biedt ook een soort controle over de uitlijning van items wanneer ze uit de pas lopen.

rechtvaardigen-inhoud: flex-start | flex-end | centrum | spatie tussen | ruimte rondom

flex-start (standaard): items worden verschoven naar het begin van de regel;
flex-end: items worden naar het einde van de lijn geduwd;
midden: items worden uitgelijnd op het midden van de regel;
tussenruimte: de elementen zijn gelijkmatig verdeeld (het eerste element staat aan het begin van de regel, het laatste is aan het einde)
space-around: items zijn gelijkmatig verdeeld met gelijke afstanden tussen zichzelf en buiten de regel.

rechtvaardigen-inhoud
align-items

Geldt vóór de bovenliggende van de flexcontainer.

Definieert het standaardgedrag voor hoe flexitems worden gepositioneerd ten opzichte van de dwarsas op de huidige regel.Zie het als de dwarsasversies van uitvulinhoud (loodrecht op de hoofdas).

align-items: flex-start | flex-end | centrum | basislijn | rekken

flex-start: de cross-start grens voor items die zich op de cross-start positie bevinden;
flex-end: de cross-end grens voor items die zich op de cross-end positie bevinden;
midden: items worden uitgelijnd op het midden van de dwarsas;
baseline: elementen worden uitgelijnd op hun baseline;
stretch (standaard): De elementen rekken uit om de container te vullen (gebaseerd op min-width / max-width).

align-items
align-content

Geldt vóór de bovenliggende van de flexcontainer. Lijnt de rijen van een flexcontainer uit wanneer er vrije ruimte is op de dwarsas, vergelijkbaar met hoe inhoud uitvullen dat doet op de hoofdas. Let op: Deze eigenschap werkt niet met enkelregelige flexboxen.

align-content: flex-start | flex-end | centrum | spatie tussen | ruimte-rond | rekken

flex-start: lijnen worden uitgelijnd ten opzichte van het begin van de container;
flex-end: lijnen zijn uitgelijnd ten opzichte van het uiteinde van de container;
midden: lijnen zijn uitgelijnd met het midden van de container;
spatie tussen: regels zijn gelijkmatig verdeeld (eerste regel aan het begin van de regel, de laatste aan het einde)
space-around: lijnen zijn gelijkmatig verdeeld met gelijke tussenruimte;
stretch (standaard): Rekt lijnen uit om de vrije ruimte te vullen.

align-content
volgorde

Flex-items worden standaard in hun oorspronkelijke volgorde opgemaakt.De ordereigenschap kan echter de volgorde bepalen waarin ze in de container worden geplaatst.

bestel 1

flex-groeien

Geldt voor het kind/flex item. Bepaalt de mogelijkheid voor een flexartikel om naar behoefte te 'groeien'.Neemt een dimensieloze waarde aan, dient als een verhouding.Het bepaalt hoeveel van de vrije ruimte in de container het element kan innemen. Als voor alle items flex-grow is ingesteld op 1, krijgt elk kind dezelfde maat in de container.Als u een van de nakomelingen op 2 zet, neemt deze twee keer zoveel ruimte in beslag als de andere.

flex-groeien (standaard 0)

flex-shrink

Geldt voor het kind/flex item.

Bepaalt de mogelijkheid voor een flexartikel om indien nodig te krimpen.

flex-shrink (standaard 1)

Negatieve getallen worden niet geaccepteerd.
flex-basis

Geldt voor het kind/flex item. Bepaalt de standaardgrootte voor het element voordat ruimte in de container wordt toegewezen.

flex-basis | automatisch (standaard automatisch)

buigen

Geldt voor het kind/flex item. Dit is een afkorting voor flex-grow, flex-shrink en flex-basis.De tweede en derde parameter (flex-shrink, flex-basis) zijn optioneel.De standaardwaarde is 0 1 automatisch.

flex: geen | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

uitlijnen-zelf

Geldt voor het kind/flex item. Hiermee kunt u de standaarduitlijning of uitlijnitems voor individuele flexitems overschrijven. Raadpleeg de beschrijving van de eigenschap align-items voor een beter begrip van de beschikbare waarden.

align-self: auto | flex-start | flex-end | centrum | basislijn | rekken

Voorbeelden van
Laten we beginnen met een heel, heel eenvoudig voorbeeld dat bijna elke dag voorkomt: precies uitlijnen op het midden.Het kan niet eenvoudiger met flexbox.

Parent (display: flex; height: 300px;) .child (width: 100px; / * Goed genoeg * / height: 100px; / * Good good * / margin: auto; / * Magic! * /)

Dit voorbeeld is gebaseerd op het feit dat de marge onder de flexcontainer, ingesteld op auto, de extra ruimte absorbeert, dus de taak om op deze manier op te vullen zal het element precies in het midden op beide assen uitlijnen.Laten we nu enkele eigenschappen gebruiken.Stel je een set van 6 elementen met een vaste grootte voor (voor schoonheid), maar met de mogelijkheid om het formaat van de container te wijzigen.We willen ze horizontaal gelijkmatig verdelen, zodat alles er goed uitziet als het browservenster wordt verkleind (geen @mediaquery's!).

Flex-container (
/ * Maak eerst een flex-context * /
weergave: flexibel;

/ * Definieer nu de stroomrichting en of we de elementen willen
verpakt in een nieuwe regel
* Onthoud dat dit hetzelfde is als:
* Flex-richting: rij;
* Flex-wrap: omslag;
* /
flex-flow: rijomslag;

/ * Laten we nu bepalen hoe de ruimte wordt toegewezen * /
}

Klaar. Al de rest is al een kwestie van inschrijven. Laten we iets anders proberen.Stel je voor dat we een rechts uitgelijnde navigatie helemaal bovenaan onze site willen, maar we willen dat deze gecentreerd is voor middelgrote schermen en een enkele kolom wordt voor kleine schermen.Alles is eenvoudig genoeg.

/ * Grote schermen * /
.navigatie (
weergave: flexibel;
flex-flow: rijomslag;
/ * Verschuift elementen naar het einde van de lijn langs de hoofdas * /
rechtvaardigen-inhoud: flex-end;
}

media alle en (max. breedte: 800px) (
.navigatie (
/ * Voor middelgrote schermen richten we de navigatie op het midden,
gelijkmatige verdeling van de vrije ruimte tussen de elementen * /
rechtvaardigen-inhoud: space-around;
}
}

/ * Kleine schermen * /
media alle en (max-breedte: 500px) (
.navigatie (
/ * Op kleine schermen plaatsen we in plaats van een regel items in een kolom * /
flex-richting: kolom;
}
}

Laten we spelen met de flexibiliteit van flexitems!Wat dacht je van een mobielvriendelijke lay-out met drie kolommen en een kop- en voettekst over de volledige breedte?En in een andere volgorde.

Wikkel (
weergave: flexibel;
flex-flow: rijomslag;
}

/ * Zet alle elementen op 100% breedte * /
.header, .main, .nav, .aside, .footer (
buig 1100%;
}

/ * In dit geval vertrouwen we op de oorspronkelijke volgorde om te targeten
* Mobiele toestellen:
* 1 kop
* 2 navigatie
* 3 hoofdgerechten
* 4 opzij
* 5 voettekst
* /

/ * Middelgrote schermen * /
media alle en (min-breedte: 600px) (
/ * Beide zijbalken staan ​​op dezelfde regel * /
.opzij (flex: 1 auto;)
}

/ * Grote schermen * /

Een moderne front-end ontwikkelaar moet actief in staat zijn verschillende tools in de praktijk toe te passen die het mogelijk maken om het proces van opmaak en programmering van de klantcomponent van het project te automatiseren. Hiervoor zijn er al veel frameworks, zowel grote als kleine, build-systemen, pakketbeheerders, een hele reeks pakketten voor taken van elk niveau, preprocessors, template-engines en andere "suiker", die is gemaakt om de productiviteit te vereenvoudigen en te verhogen van een specialist op dit gebied.

Helaas kan het voor beginnende fronten moeilijk zijn om de overvloed aan deze tools te begrijpen, omdat ze zich voortdurend moeten ontwikkelen en de basisprincipes van de lay-out moeten kennen. En om deze reden blijven velen "op de ouderwetse manier", gewone css, met een aantal herhaalde selectors, lay-out zonder het principe van verschillende rasters te begrijpen, wilde hoofdpijn met verschillende soorten centrering, enz.

Als ze eerder, een miljoen jaar geleden, op tafels werden opgemaakt en vervolgens op diva's klommen, nu zonder flexbox in combinatie met rasters of een kant-en-klaar css-framework, denk ik dat zelfs een eenvoudige lay-out op diva's binnenkort zal worden overwogen "slechte manieren". Dit is nog niet het geval, maar voor zover ik de ontwikkeling van verschillende technieken en best practices op dit gebied observeer (meer precies, ik heb zelfs geen tijd om te observeren), dan vindt er hoogstwaarschijnlijk een dergelijke variant plaats.

Natuurlijk zal ik in deze kleine notitie niet alle onmisbare vaardigheden van een goed front en hulpmiddelen voor comfortabel werken in overweging kunnen nemen, maar ik zal enkele basisprincipes laten zien en becommentariëren waarmee u kunt afzetten en verder kunt gaan .

Adaptief indelen

Laten we beginnen met een responsieve lay-out, omdat dit een zeer populair onderwerp is vanwege de snelle ontwikkeling van mobiel verkeer. Laten we, om te begrijpen hoe verschillende rasters werken, en dus adaptief zijn, van buitenaf kijken naar de blokelementen die de paginalay-out vormen en tegelijkertijd fungeren als containers voor andere elementen (tekst, pictogrammen, afbeeldingen, enz., die kan standaard worden geplaatst of met behulp van positionering). Traditionele lay-out op divs.

Zoals u weet, neemt elk display: block-element standaard de volledige beschikbare schermbreedte in beslag, tenzij we de breedte ervan expliciet definiëren (in px of %). Maar zelfs als de op deze manier gedefinieerde breedte eraan wordt toegewezen, dan zal het volgende blokelement erna het op een nieuwe regel volgen (dit verschilt trouwens van blok van inline, die elkaar zullen volgen). Dit is een belangrijk punt, je hoeft het alleen maar te begrijpen, en om het te begrijpen, is het gemakkelijk om deze zaak in de inspecteur van elke browser te bekijken.

Als we de blokelementen naast elkaar willen hebben, dan moeten we de elementen omwikkelen (zwevend), en we moeten de breedte van de blokken in% instellen zodat de browser automatisch de breedte in pixels berekent. Als een algemeen voorbeeld is dit een inhoudsblok en ernaast staat een zijbalk. Vergeet niet om na het inpakken van de elementen clearfix te gebruiken, de verpakking opnieuw in te stellen, om de lay-out in de toekomst niet te breken.

Het allereerste dat we moeten doen, is de browser "op de hoogte stellen" dat we een responsieve weergave willen gebruiken, in overeenstemming met welke browser de pagina in deze modus zal openen, dit wordt gedaan met de volgende verklaring tussen de head-tags van het document:

Meta name = "viewport" content = "width = device-width, initial-scale = 1"

Met andere woorden, de breedte van het apparaat is op een schaal van 1: 1. En als uw lay-out niet responsief is gemaakt, zullen er hoogstwaarschijnlijk problemen zijn met een dergelijke weergave in de mobiele weergave (hoogstwaarschijnlijk wordt alle inhoud gecomprimeerd tot een "accordeon" als u zich logisch voorstelt wat er zou kunnen gebeuren :). Vanaf nu kunnen we praten over de volgende stap, die zich in elk rastersysteem of adaptief raamwerk bevindt.

Elk rastersysteem heeft breekpunten, overgangspunten. Laten we eens kijken naar Bootstrap, wanneer bij het wijzigen van de breedte van het scherm (mobiel, tabletweergave, enz.), een element wordt gecontroleerd dat de huidige kolomklasse heeft (bijvoorbeeld de desktopklasse voor een kolom, in het populaire Bootstrap-framework , dit is col-md- (x ), md - desktop). De klassen stellen op hun beurt verschillende breedtes in% in, gelijk aan (100/12) x, waarbij x de breedtefactor is, van 1 tot 12.

Kolomklassen beschrijven het gedrag van inpakelementen: er is een klasse (tegelijkertijd kan de klasse voor verschillende apparaten zijn) - de omloop is ingesteld, nee - de breedte is 100% (typisch voor het presenteren van inhoud op mobiele apparaten). En dit gedrag wordt geïmplementeerd met behulp van mediaquery's die alle browsers begrijpen. Mediaverzoek - in css betekent dit concept een regel, wanneer aan de voorwaarde is voldaan, de corresponderende stijlen zijn verbonden, bijvoorbeeld de breedte is minder dan 600px geworden - we verbinden een nieuw blok met stijlen dat de oude overschrijft. De kolomklasse col-md- (x) is bijvoorbeeld standaard ingeschakeld vanaf 992px en hoger en uitgeschakeld tot 992px. Maar alle bootstrap-onderbrekingspunten kunnen standaard door uw eigen worden overschreven bij het samenstellen van het raster.

Dat zijn alle eenvoudige mechanica met divs, die de breedte in% moeten instellen, float: left; en verwijder de wrapper na de kolommen (in bootstrap zijn de kolommen in dit geval verpakt in een wrapper met de rijklasse), die we op een rij zetten. Dit alles kan eenvoudig door uzelf en zonder enig raster worden geïmplementeerd, als er een concept is van hoe het werkt, alleen klassen in een willekeurig raster worden geschreven en er al veel code is geschreven, blijft uw taak om klassen naar elementen te schrijven, dat is alle.

We gaan een beetje verder en overwegen een andere optie. Met flexbox zullen we tegelijkertijd in de praktijk een klein skelet van een responsieve pagina maken met behulp van deze nieuwe lay-outtechnologie. In het algemeen kunnen buigingen ons globaal gesproken hoofdpijn besparen, zoals centreren, horizontaal en verticaal uitlijnen in de container. En samen met mediaquery's, rekening houdend met de hierboven beschreven mechanismen, kunt u een adaptieve sjabloon van zeer hoge kwaliteit bouwen met elke uitlijning, zowel verticaal als horizontaal. We spelen over het algemeen zoals we willen.

Hier wil ik opmerken dat de breedte gespecificeerd in%, zoals in het geval van het inhoudsgebied en de zijbalk (de kop- en voettekst nemen standaard de volledige breedte in beslag, 100%), automatisch herberekend onmiddellijk bij het wijzigen van de grootte (of het openen van de pagina op een klein scherm). Dit is misschien wel de hoofdregel, stel alles in op %, de browser doet de rest zelf.

Laten we in diva's voorlopig alleen tekst hebben, laten we oefenen met het uitlijnen van de tekst (horizontaal / verticaal). Het is ook een goede gewoonte om de footer uit te sluiten van de algemene wrapper, html en body, height: 100%, naar de wrapper: min-height: 100% in te stellen, zodat de footer altijd onder aan de pagina wordt gedrukt.

Ik ben gewend om scss te gebruiken, ik zal een lijst geven van de code erop:

$ grijs: # 808080; $u: 50px; html, body (marge: 0; hoogte: 100%;) body (font-familie: monospace, sans-serif; text-transform: hoofdletters;) .row (display: flex;) .vertical-center (align-items: midden; inhoud rechtvaardigen: midden;) .wrap (min-hoogte: 100%; koptekst, .inhoud, .zijbalk (rand: 1px effen $ grijs;) koptekst (hoogte: $ h;) .inhoud (hoogte: 100px; opvulling: 15px 15px 0 15px; border-top-width: 0; margin-right: 1%; width: 75%;) .sidebar (hoogte: 120px; padding: 15px 15px 0 15px; border-top-width: 0; breedte: 25%;)) voettekst (hoogte: $ h; rand: 1px effen $ grijs;)

weergave: flexibel; - incl. flexibele context eigenschap flex-richting: rij; - standaard, als we de kolom niet expliciet specificeren. Dit is wat ons in staat stelt om veel geweldige dingen te doen. Ik weet het niet zeker, maar het lijkt erop dat deze eigenschap niet overal door caniuse wordt ondersteund, maar het is tijd om al deze oude browsers weg te gooien en moderne te installeren, toch? :)

We stellen ook de verhouding in voor de breedte van de inhoud - zijbalk, 75%: 25%. Hetzelfde effect zou worden verkregen bij het gebruik van bootstrap. Alleen met klassen col-md-9 voor inhoud ((100/12 9)% - breedte in percentage, 75) en col-md-3 voor zijbalk ((100/12 3)% - breedte in percentage, 25)

Laten we dus eens kijken wat er aan de hand is en hoe flexbox werkt. Het allereerste is om display in te stellen: flex naar de container waarin we bijvoorbeeld moeten centreren. In de opmaak heb ik deze koptekst, voettekst en container, met daarin inhoud en een zijbalk. Het eenvoudigste dat flexbox hier efficiënt doet, is om eenvoudig de kop- en voettekst te pakken en uit te lijnen met behulp van de .vertical-center-klasse:

Als gevolg hiervan wordt de tekst in twee richtingen uitgelijnd, in de kop- en voettekst. Het middelste deel blijft hier, als we display: flex niet hadden ingesteld, dan zou de standaard display: block blijven, wat uiteindelijk met de inhoud en zijbalkblokken als volgt uitpakte:

Die. locatie onder elkaar. En het maakt niet uit of ze een breedte krijgen, ze zouden eromheen moeten wikkelen. Maar zelfs dit is niet het gemak van flexbox. Niet om de code met één instructie in te korten, maar dat we met behulp van nog een paar prachtige eigenschappen waarmee we de flexbox kunnen instellen, blokken van verschillende breedtes in twee richtingen kunnen centreren, evenals tekst (gecentreerd, verticaal / horizontaal, op het begin, aan het einde)!

Maar voordat we bij de hoofdvraag komen waarvoor dit bericht is gemaakt, laten we onze eenvoudige lay-out iets responsiever maken. Nu, bij het wijzigen van het formaat, worden de inhoud en de zijbalk niet onder elkaar gestapeld. Het is noodzakelijk om dit op te lossen, want stel je voor dat alle tekst bij lage resoluties lelijk "gecomprimeerd" zal zijn in het inhoudsgebied en de zijbalk. Ik heb het niet eens over foto's. Trouwens, afbeeldingen die adaptief zijn, moeten worden ingesteld:

Laten we mediaquery's gebruiken. We verbeteren onze css, ik zal niet alles herschrijven, ik laat gewoon // ​​... * waar de code hetzelfde is:

Nu zal de zijbalk onder de inhoud op telefoons vouwen (<480px):

Werken met uitlijningen

Laten we als test in het inhoudsblok verschillende ballonnen maken die zijn gevuld met verschillende kleuren, zodat ze horizontaal en verticaal uitgelijnd zijn in het inhoudsgebied, hiervoor voegen we html toe:

Nogmaals, waar er tekens zijn, // ..., blijft de code hetzelfde.

Resultaat:

Zoals je kunt zien, zijn de ballen perfect uitgelijnd. Bij het toevoegen van nieuwe ballen zal ook de uitlijning probleemloos verlopen. Eigenschappen uitlijnen: midden; is verantwoordelijk voor verticale uitlijning, en rechtvaardigen-inhoud: ruimte-tussen; gelijkmatig horizontaal.

align-items: flex-start; doet dit als volgt:

Evenzo, na het toepassen van align-items: flex-end; ballen komen op de bodem van de container terecht en align-items: baseline; doet dit als volgt:

Er is ook een eigenschap align-items: stretch;, het lijkt elk item in de hoogte uit te rekken, maar het lukte me niet om het snel te implementeren, dus ik zal het scherm niet tonen.

Dit heeft allemaal te maken met de horizontale as (standaard). Maar als we kolom expliciet doen:

Dan zullen de ballen verticaal zijn! En nogmaals, met behulp van verschillende eigenschappen van align-items, zullen we alles bereiken wat wordt gedaan bij het horizontaal bouwen van ballen, maar alleen verticaal! Er is ook de eigenschap align-self, deze overschrijft de eigenschap align-items voor een bal of groep. Op deze manier kunt u alle afstemmingen flexibel beheren.

In deze korte notitie hebben we gekeken naar de basisprincipes van een responsieve lay-out, meer bepaald de mechanica waarmee elementen op de pagina zich kunnen aanpassen aan verschillende resoluties, en ook gekeken naar de basisprincipes van de flexboxlay-out. Ik hoop dat het artikel in de eerste plaats nuttig zal zijn voor diegenen die bijvoorbeeld niet de hele enorme bootstrap willen nemen omwille van slechts één raster, maar hun eigen bootstrap zullen nemen en maken, gebaseerd op het materiaal van deze les.

Concluderend, flexbox is cool, maar je moet het nog steeds voorzichtig gebruiken als je ondersteuning nodig hebt voor oudere versies van browsers.