Laat ik dit eerst zeggen: flexbox is eenvoudig. Of het nu komt door vroege adoptiekwesties, of omdat we hebben geleerd te denken in termen van drijvers en blokkades, ik hoor vaak van webontwerpers dat ze vinden dat Flexbox complex is om te implementeren. Maar ik herhaal: flexbox is eenvoudig.
Er is een truc om Flexbox te begrijpen, die ik je zal leren, waarna alles duidelijk zal zijn. Maar eerst wil ik praten over wat flexbox is.
Flexbox (of de Flexibele Box-lay-outmodule om het de juiste naam te geven) is een set CSS-eigenschappen die combineren om op een responsieve manier inhoud te lay-outen.
Flexbox is de eerste CSS-lay-outtechniek die werkt voor het moderne web. Het is redelijk om te zeggen dat totdat flexbox werd ondersteund, er geen lay-outtechniek was die goed werkte met responsief webontwerp.
Veel hacks zweefden rond, zoals instellingselementen om weer te geven: inline-block en toestaan dat ze inpakken. Maar dit leverde een aantal problemen op voor flexibele sites, niet het minst het gebrek aan controle en het domino-effect van het aanpassen van de grootte van elementen. Om deze reden gebruiken veel responsieve websites nog steeds JavaScript om inhoud te positioneren.
Flexbox wordt door de W3C beschreven als bedoeld voor het indelen van gebruikersinterface-elementen, zoals menu-items, en is niet bedoeld voor het opmaken van hele pagina's.
De reden dat het niet bedoeld is voor hele pagina's opmaken, is dat flexbox een bijbehorende CSS-module heeft, de Grid lay-outmodule welke is bedoeld voor lay-out. Rasterlay-out wordt beschouwd als de meest geschikte techniek voor paginalay-outs. Helaas is er op dit moment erg weinig ondersteuning voor het netwerk en met 'beperkt' bedoel ik 'geen'. Zelfs de nieuwste versie van Chrome kan dit zonder vlaggen niet ondersteunen.
Gelukkig is de browserondersteuning voor flexbox veel uitgebreider. En omdat het zoveel moderne lay-outproblemen oplost, is flexbox een ideaal hulpmiddel totdat het raster eindelijk wordt gebruikt.
Flexbox is ideaal voor het stylen van componenten op een pagina. De echte kracht van flexbox, en de reden dat het zo veel beter werkt dan andere lay-outopties, komt van het declareren van stijlen op groepen items in plaats van afzonderlijke items.
Als het om lay-out gaat, hoeven we zelden een enkel item te plaatsen. Als we van plan zijn dit te doen, is het veel beter om positionering te gebruiken. Flexbox werkt het beste als het bepaalt hoe groepen elementen zich tot elkaar verhouden.
Ontwerp altijd een ding door het in zijn volgende grotere context te beschouwen - een stoel in een kamer, een kamer in een huis, een huis in een omgeving, een omgeving in een stadsplan. - Eliel Saarinen
Als zodanig is de flexbox-specificatie verdeeld in twee delen, één set eigenschappen die verwijst naar het containerelement en één set eigenschappen die verwijzen naar de elementen binnenin.
Browserondersteuning is, typisch, een complexe vraag. Nog gecompliceerder gemaakt voor flexbox omdat flexbox verschillende syntaxis heeft. Vroege besluiteloosheid, onafhankelijke ontwikkeling door sommige browserleveranciers en een iteratief proces hebben ons met verschillende versies van flexbox achtergelaten waar we allemaal rekening mee moeten houden.
Gelukkig kunnen we nu vertrouwen op de toevoeging van een aantal browser-voorvoegsels voor oudere browsers. Volgens caniuse.com , van de huidige reguliere browsers zal alleen IE9 een probleem voor ons zijn.
Gelukkig, net als bij alle CSS, mislukt het als de flexbox faalt, zonder geluid. Dit betekent dat IE9 het gewoon zal negeren.
Dankzij een verbluffend gebrek aan samenwerking tussen verschillende afdelingen van commissies en bedrijven, heeft de implementatie van flexbox bijna de chaos van de vroege jaren '00 overwonnen, toen elke browser elk afzonderlijk afzonderlijk en onjuist, tegelijkertijd implementeerde. Iedereen gaf het voordeel van de twijfel, de drie implementaties van flexbox waren simpelweg een iteratieve benadering die heeft geresulteerd in de meest behulpzame gemeenschappelijke oplossing.
Er zijn drie versies van de flexbox-syntaxis waarvan u op de hoogte moet zijn: oud, tussendoor en nieuw. Verschillende browsers ondersteunen verschillende syntaxen, IE10 ondersteunt bijvoorbeeld de daartussen liggende syntaxis.
Net als browserprefixen schrijven we de Flexbox-syntaxis van het oudste naar het nieuwste, zodat de nieuwste ondersteunde syntaxis de oudere syntaxes overschrijft.
We schrijven bijvoorbeeld display: flex zoals zo:
display:-webkit-box; /*old prefixed for webkit*/display:-moz-box; /*old prefixed for mozilla*/display:-ms-flexbox; /*inbetween prefixed for ie*/display:-webkit-flex; /*new prefixed for webkit*/display:flex; /*new*/Voor de duidelijkheid, ik ga niet in de oudere syntaxes duiken, of de voordelen bespreken van pre-processors, post-processors en verschillende conversiescripts. In al mijn voorbeelden ga ik de juiste, nieuwe syntaxis gebruiken.
Als het gaat om de productiecode, gebruik ik een reeks Sass-mixins om de flexbox-ondersteuning uit te breiden naar oudere browsers.
Er is een uitstekend Sass mixin hier , die u kunt gebruiken om het opgeblazen gevoel van uw code te voorkomen of om de legacy-syntaxis te extraheren.
Het geheim van flexbox is dat het helemaal geen doos is. Tot nu toe gebruikte alle lay-out op het web een cartesisch systeem van x en y om punten uit te zetten. Flexbox is daarentegen een vector.
Klinkt goed, toch? Flexbox is een vector, wat betekent dat we een lengte definiëren en we een hoek definiëren. We kunnen de hoek wijzigen, zonder de lengte aan te tasten; en we kunnen de lengte veranderen, zonder de hoek aan te tasten.
Deze nieuwe benadering betekent dat een deel van de terminologie van flexbox aanvankelijk complex is. Wanneer we bijvoorbeeld items uitlijnen op de bovenkant van een flexcontainer, gebruiken we flexstart, niet top, omdat als we de richting wijzigen, flex-start nog steeds van toepassing is, maar top niet.
Zodra je deze benadering begrijpt, wordt veel van de flexbox gedemystificeerd.
De syntaxis van Flexbox is onderverdeeld in twee groepen: de eigenschappen die de container besturen en de eigenschappen die de directe afstammelingen van de container bepalen. De eerste is het nuttigst, dus laten we daar beginnen.
Laten we zeggen dat we items binnen een blok willen wegruimen. We willen dat ze gelijkmatig verdeeld worden. Met behulp van flexbox is het heel gemakkelijk om te doen. Het eerste dat we nodig hebben, is een paar markeringen om dit uit te proberen:
Flexbox Layout Het is een eenvoudige HTML-pagina , met een house- div, die vijf room- div's bevat die elk een klasse hebben die hun functie, keuken, wasruimte, lounge en slaapkamer identificeert .
Wat we gaan doen is het huis instellen als een flexbox-container. Alle flexbox-eigenschappen die we op huis zetten, worden vervolgens toegepast op de kinderen (de kamers ).
Om de kamers in te richten , moeten we eerst het huis als een flexboxcontainer declareren en vervolgens vertellen hoe we de onderliggende elementen willen laten rangschikken.
Om huis als een flexboxcontainer te declareren , gebruiken we de volgende code:
.house {background:#FF5651;display:flex;}En dat is het. We hebben een flexibele box gemaakt. Het enige dat we nu hoeven te doen, is om flexbox te vertellen hoe de kamers moeten worden ingedeeld. We kunnen dat doen met de eigenschap justify-content .
justify-content heeft vijf mogelijke waarden: center, flex-start, flex-end, space-around en space-between. Deze centreren de items, lijn ze uit met de start (die bovenaan of links is, zoals we hieronder zullen bespreken), het einde (wat onderaan of rechts is), spaties ze met gelijke ruimte rond elk item, of met gelijke ruimte tussen elk item, respectievelijk.
We zullen space-around gebruiken:
.house {background:#FF5651;display:flex;justify-content: space-around;}Hier is een demo . Merk op hoe er dubbel zoveel ruimte tussen de items is als er aan de twee buitenste randen is? Dat komt omdat elk item links en rechts dezelfde ruimte heeft. Als we tussenruimte zouden hebben gebruikt , zou er geen ruimte aan de randen zijn.
Ik ben niet zeker van je, maar de wasruimte in mijn huis is een beetje kleiner dan de lounge, en hoewel ik een kleine keuken heb, zou ik dol zijn op een veel grotere. Dus laten we een paar toevoegingen aan onze code maken om dat te weerspiegelen:
.kitchen {width:300px;height:300px;}.washroom {width:45px;height:60px;}Zoals je kunt zien in dit voorbeeld , onze kamers zijn nog steeds gelijkmatig verdeeld. Hoewel we de maat hebben veranderd. Flexbox is geweldig om content te organiseren.
Zoals we hierboven hebben besproken, is een van de redenen dat flexbox zo goed werkt voor ontwerpers dat het wordt beschreven als een vector. Op dit moment ondersteunt flexbox slechts vier hoeken: 0, 90, 180 en 270 graden. Dus het is een stuk eenvoudiger om ze als een as te zien.
Om de as te veranderen, gebruiken we de eigenschap flex-direction , die vier mogelijke waarden heeft: rij (de standaardinstelling - zoals u kunt zien in de bovenstaande voorbeelden, onze kamers worden van links naar rechts weergegeven), rijomkering, kolom en column-reverse.
Als we de flexrichting in kolom veranderen, ziet u het in deze demo dat de kamers nu verticaal zijn neergelegd, van boven naar beneden:
.house {background:#FF5651;display:flex;justify-content: space-around;flex-direction:column;}Zoals je vast wel kunt raden, reverse-row en column-reverse keren de volgorde van de items in je flexcontainer om.
In het laatste voorbeeld merk je dat terwijl het huis zich helemaal over de viewport uitstrekt, het zich tot de volledige hoogte uitstrekt, zelfs wanneer het is ingesteld op flexrichting: kolom.
Om goed te kunnen spelen met het op CSSes gebaseerde coördinatensysteem van CSS, wordt de flexboxcontainer behandeld als een blokniveauelement.
Net als display: block heeft een begeleidend display: inline-block, dus om weer te geven: flex heeft display: inline-flex.
inline-flex is op dit moment het handigst als je flexbox-elementen in een bestaande lay-out laat vallen en je hem nodig hebt om mooi te spelen met drijvers en geplaatste elementen.
Zoals we hebben gezien, vindt flexbox het niet erg om horizontaal of verticaal uit te zetten, welke richting je ook kiest wordt beschouwd als de primaire as van flexbox.
Maar met flexbox kunnen we ook de positie langs de tegenovergestelde, secundaire as bepalen.
Positie op de secundaire as wordt bepaald door de eigenschap align-items ; het heeft vijf mogelijke waarden: baseline, midden, flex-end, flex-start en stretch.
baseline is normaal gesproken de meest bruikbare optie. Het zorgt ervoor dat de basislijnen van de tekst op één lijn komen te staan. Om dit te testen, moeten we een aantal wijzigingen aanbrengen in ons HTML-bestand:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomU ziet dat ik wat tekst heb toegevoegd en geïmporteerd en vervolgens een Google-lettertype heb toegepast. Ik heb ook de lettergrootte in de keuken en wasruimte veranderd, dus er is een duidelijk onderscheid.
Wanneer we de eigenschap align-items instellen op basislijn , ziet u dit in deze demo dat de basislijn van de tekst overeenstemt.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;}uitlijningsitems: middelpunt uitgelijnd, hetzij verticaal (als flexrichting: rij of flexrichting: rijomkering ) of horizontaal (als flexrichting: kolom of flexrichting: kolomomkeer ). Hier is een demo.
align-items: flexstart wordt uitgelijnd met de bovenkant en align-items: flex-end wordt uitgelijnd met de onderkant (als flexrichting: rij of flexrichting: rij-achteruit ) of naar links en rechts (als flex-richting: kolom of flex-richting: kolom-omgekeerd ). Hier is een demo.
uitrekken, is een andere zeer nuttige optie. stretch zal het formaat van de items aanpassen, zodat elk dezelfde hoogte heeft (ze zullen groeien, niet krimpen). Hier is een demo.
In onze andere voorbeelden hebben we expliciet de hoogte van de items ingesteld, wat voldoende is om flexbox te overschrijven, dus om align-items te zien: stretch werk correct, u moet de hoogte verwijderen uit alle klassen behalve één.
Tot nu toe hebben we flexbox gebruikt om elementen op te maken, zodat ze de grootte van de ruimte wijzigen, maar wat gebeurt er wanneer de inhoud van de items te groot is om op één regel te passen?
Om dit te demonstreren, ga ik mijn kamers vergroten:
Flexbox Layout KitchenWashroomLoungeBedroomBedroomhier is hoe het er nu uitziet.
Als je je browservenster verkleint, zie je dat de inhoud wordt afgekapt, omdat er geen ruimte voor is. Gelukkig definieert flexbox een flex-wrap- eigenschap voor alleen deze eventualiteit, die drie mogelijke waarden heeft: no-wrap (de standaard), wrap en wrap-reverse.
wrap zorgt ervoor dat items die buiten de container vallen om zich op een volgende regel te wikkelen, net zoals een regel tekst omloopt.
.house {background:#FF5651;display:flex;justify-content:space-around;align-items:baseline;flex-wrap:wrap;}Als je je browser platdrukt, zie je het in deze demo de items worden nu op nieuwe regels ingepakt. Merk op hoe de align-items: basislijneigenschap nog steeds wordt toegepast? De echte kracht van Flexbox zit in het combineren van zijn eigenschappen.
Een belangrijk concept, dat ik later zal bespreken, is dat flex-wrap: wrap-reverse de volgorde van de items niet omkeert, het veroorzaakt items die buiten de container zouden uitsteken om zich op een eerdere regel te wikkelen, zoals gezien in deze demo .
Zoals veel CSS-eigenschappen hebben sommige flexbox-eigenschappen steno-versies die consistenter door browserfabrikanten worden geïmplementeerd.
De flex-flow- eigenschap is een afkorting voor de flex-direction en flex-wrap eigenschappen. Dus in plaats van schrijven:
flex-direction:row-reverse;flex-wrap:wrap;We kunnen de stenografie gebruiken:
flex-flow:row-reverse wrap;Hierboven hebben we de eigenschap align-items gebruikt om items uit te lijnen met de items basislijn, positie en uitrekken. Zoals u in het vorige voorbeeld kunt zien, gebeurt dat nog steeds, maar het gebeurt regel voor regel.
Wanneer onze artikelen zijn verpakt, hebben we de mogelijkheid om in te stellen hoe ze op de secundaire as worden geplaatst als de container groter is dan vereist.
Als we de minimale hoogte van ons huis instellen op 1200px, onze lay-out het lijkt hierop .
.house {background:#FF5651;min-height:1200px;display:flex;justify-content:space-around;flex-wrap:wrap;}We kunnen nu de eigenschap align-content gebruiken om de items over de volledige secundaire as op te maken.
De eigenschap align-content heeft zes instellingen: center, flex-end, flex-start, space-around, space-between en stretch. Deze waarden leveren dezelfde resultaten op als elders: centreren, uitlijnen met één uiteinde, gelijkmatig uitrekken of uitrekken.
Hier is een demo met de eigenschap ingesteld op space-around.
Tot nu toe zijn alle eigenschappen die we hebben bekeken, ingesteld op het containerelement. Om artikelen te verfijnen, biedt flexbox ons ook een aantal eigenschappen die op afzonderlijke items kunnen worden ingesteld.
Laten we, om dit te verduidelijken, een deel van onze code verwijderen:
Flexbox Layout KitchenWashroomLoungeMaster BedroomBedroomhier is hoe het eruit ziet.
De eerste eigenschap van het flexboxitem is de verwarrend benoemde flexibele eigenschap. flex is een waarde van de displayeigenschap op de container, maar het is ook een eigenschap op zichzelf.
De flex- eigenschap is een afkorting voor de eigenschappen flex-grow, flex-shrink en flex-base . De rol van deze eigenschappen is het vergroten of verkleinen van de inhoud zodat deze de ruimte volledig vult.
De flexgroei- eigenschap vertelt de items dat ze indien nodig kunnen worden vergroot, zodat de items de breedte (voor flexrichting: rij ) en de hoogte (voor flexrichting: kolom ) volledig invullen.
De eigenschap flex-grow neemt een ratio. Dus als we de eigenschap flex-grow op 1 zetten, hebben al onze items dezelfde afmetingen als je kunt het hier zien .
.room {background:#00AAF2;height:90px;flex-grow:1;}Naast het nemen van een gelijke grootte, kunnen we ook verschillende verhoudingen instellen. Ik wil nog steeds dat mijn keuken groter is dan mijn wasruimte, dus laten we dat oplossen in deze demo .
.kitchen {height:300px;flex-grow:2;}flex-shrink werkt precies hetzelfde als flex-grow, behalve dat het item wordt verkleind als dat nodig is, in plaats van het uit te breiden.
Als u de grootte van de browser wijzigt, ziet u dat mijn keuken in verschillende grootten niet precies twee keer zo breed is als de andere. Dat komt door de eigenschap flex-basis .
flex-basis bepaalt hoe de flex-grow en flex-shrink eigenschappen worden berekend. Het heeft 2 waarden: auto (standaard) en 0.
Indien ingesteld op 0, wordt het hele item in aanmerking genomen. Indien ingesteld op automatisch is dit de opvulling rond de inhoud van het item waarvan de grootte wordt gewijzigd. Met andere woorden, bij het berekenen negeert 0 de grootte van de inhoud van het item, en hiermee wordt automatisch rekening gehouden. Er is een handig diagram geleverd door de W3C die dit verklaart.
Hier is een demo van wat er gebeurt als ik flex-basis instel : 0 bij het bovenstaande voorbeeld.
flex-basis: 0 is vooral handig als u items gelijkmatig wilt verdelen, ongeacht hun inhoud.
Zoals hierboven vermeld, is de flex- eigenschap een afkorting voor deze eigenschappen en u zult merken dat dit de meest betrouwbare manier is om deze waarden in te stellen.
De volgorde van waarden is flex-groei, flex-shrink, flex-basis. Dus, om een groeiwaarde van 2 in te stellen, een krimpwaarde van 1 en een basis van 0, zou je gebruiken:
.room {background:#00AAF2;height:90px;flex: 2 1 0;}Een van de beste kenmerken van flexbox is de mogelijkheid om de volgorde van items te wijzigen, zonder de opmaak te beïnvloeden; dit is met name handig voor toegankelijkheid, omdat het ons in staat stelt markeringen correct te coderen en vervolgens optimaal weer te geven.
Om dit te doen gebruiken we de ordereigenschap van het item.
Kijkend naar ons voorbeeld, is de wasruimte direct naast de keuken. Ik had liever dat het naast de slaapkamers was, dus ik kan meteen onder de douche van een ochtend springen, dus laten we het verplaatsen. Het is momenteel het tweede item, we willen dat het de derde is. Dus we hebben zijn ordereigenschap dienovereenkomstig ingesteld in deze demo .
.washroom {height:60px;order:2;}Zie je hoe het helemaal tot het einde van de rij sprong? Het ligt naast de slaapkamers, maar niet zoals we het bedoeld hadden. Dit is een belangrijke gotcha in flexbox, omdat veel ontwikkelaars (waaronder ikzelf) aanvankelijk verwachten dat de order als een array zal werken.
order werkt in feite als de ' z-index ' van CSS , wat betekent dat als u niet expliciet een order voor een artikel instelt, dit lager in de order is dan een artikel waarvoor expliciet een waarde is ingesteld.
We willen dat de wasruimte wordt vervangen door de lounge, dus in deze demo de enige andere items die een bestelling nodig hebben , zijn de slaapkamer s.
.washroom {height:60px;order:2;}.bedroom {order:3;}Merk op hoe beide slaapkamers hetzelfde bestelnummer delen? In dergelijke gevallen zal de browser terugvallen op de DOM-bestelling.
De laatste itemeigenschap is align-self. Het wordt gebruikt om de uitlijning van het item op de secundaire as te wijzigen. align-items worden gebruikt om alle items uit te lijnen en deze eigenschap biedt u de optie om af te zien van die algemene instelling.
Het heeft dezelfde vijf waarden nodig als de equivalente eigenschap op de container: baseline, center, flex-end, flex-start en stretch.
Hier is een demo van de wasruimte opnieuw uitgelijnd.
.washroom {height:60px;order:2;align-self:flex-end;}Flexbox is een krachtige optie voor het maken van inhoud. Hoewel het niet bedoeld is voor het opmaken van hele pagina's, maakt zijn superieure ondersteuning voor Grid Layout het een geweldige optie, vooral voor websites die voor het eerst mobiel zijn.
Om te demonstreren, gaan we een eenvoudige pagina samenstellen die een aantal van de hierboven beschreven technieken gebruikt.
De eerste is onze markup en enkele basisstijlen voor de pagina.
Flexbox Demo - A
- B
- C
- D
- E
- F
- G
Als je kan zien , Ik heb een div met de ID- pagina. Binnenpagina Ik heb een ongeordende lijst met nieuwsitems. Na de nieuwsitems heb ik de koptekst, die onder de nieuwsinhoud ligt ten behoeve van de toegankelijkheid. Eindelijk, ik heb een voettekst.
Het eerste wat ik wil doen is de kop naar de bovenkant van de pagina verplaatsen. Om dat te doen, zullen we de pagina instellen als een flexbox-container. Vervolgens stellen we de richting in op kolom. Wijs vervolgens een order toe aan elk van de onderliggende elementen van de pagina .
#page {display:flex;}#page {display:flex;flex-flow:column;}#header {order:1;}#news {order:2;}#footer {order:3;}De volgende stap is het opmaken van de kop. Kinderelementen in flexboxcontainers kunnen op zich zelf flexboxcontainers zijn, dus we kunnen flexbox gebruiken om de headerelementen gelijkmatig te sparen.
Laten we de header instellen als een flexbox-container, laten we de inhoud gelijkmatig verdelen, zonder extra opvulling aan de zijkanten, en laten we er ten slotte voor zorgen dat de menu-items dezelfde basislijn hebben als het logo.
#header {order:1;display:flex;justify-content:space-between;align-items:baseline;}Onze nieuwsitems worden tijdelijke aanduidingen voor aanbevolen verhalen, dus moeten ze een aanzienlijke omvang hebben om ruimte te maken voor tekst en een afbeelding of video. Dus we moeten ze inpakken.
Laten we de nieuws- div als een flexbox-container instellen. Laten we vervolgens de newsItem enkele minimale dimensies en een beetje kleur geven, zodat we ze duidelijk kunnen zien.
#news {order:2;display:flex;}.newsItem {min-width:300px;min-height:250px;background:#79797B;border:1px solid #706667;}Nu moeten we instellen dat de nieuwscontainer wordt ingepakt en de newsItem s worden uitgebreid om de beschikbare ruimte te vullen.
#news {order:2;display:flex;flex-flow:row wrap;}De uitdaging die we nu hebben, is dat wanneer de nieuwsitems niet gelijkmatig worden verspreid, het grootste item (G) onderaan staat. Op de meeste sites willen we de grootste hoeveelheid ruimte geven aan de bovenste content. We kunnen dit oplossen door de wrap in wrap-reverse in te stellen.
#news {order:2;display:flex;flex-flow:row wrap-reverse;}Dat de artikelen opnieuw bestelt, maar als ze van linksboven lezen, zijn ze nu niet in de juiste volgorde. We moeten dus de volgorde omkeren door de richting rij-achteruit in te stellen.
#news {order:2;display:flex;flex-flow:row-reverse wrap-reverse;}Dat plaatst de items in opeenvolgende volgorde, van links naar rechts, van boven naar beneden; met de grotere items altijd bovenaan. Maar ik wil de volgorde van de verhalen in mijn opmaak niet wijzigen om item A te dwingen vóór item B te komen. Dus het laatste wat ik moet doen is de volgorde van de items wijzigen.
.newsItem:nth-of-type(7) {order:1;}.newsItem:nth-of-type(6) {order:2;}.newsItem:nth-of-type(5) {order:3;}.newsItem:nth-of-type(4) {order:4;}.newsItem:nth-of-type(3) {order:5;}.newsItem:nth-of-type(2) {order:6;}.newsItem:nth-of-type(1) {order:7;}Het laatste element dat moet worden gestileerd is de voettekst. We willen het opmaken, net zoals de koptekst, maar omdat de voettekst slechts drie onderliggende elementen heeft (vergeleken met de koptekst van de koptekst ), zullen we de alinea instellen op tweemaal zo breed als het logo en de lijst .
#footer {order:3;display:flex;align-items:baseline;flex-direction:row;}#footer > * {flex:1;}#footer > p {flex:2;padding-right:2em;}Dat werkt prima op desktopformaten, maar verkleint je browser en je zult zien dat hij te klein is op kleine apparaten. Laten we dus de code zo wijzigen dat deze is opgemaakt als kolommen onder 600px en teruggaat naar een rij boven 600px.
#footer {order:3;display:flex;align-items:baseline;flex-direction:column;padding:2em 0;}#footer > * {flex:1;}#footer > p {flex:2;}@media only screen and (min-width:600px) {#footer {flex-direction:row;padding:0;}#footer > p {margin-right:2em;}}En daar heb je het. Een moderne benadering om inhoud op een webpagina te plaatsen, die breed wordt ondersteund en gemakkelijk kan worden geïmplementeerd.
De kracht van flexbox is dat de eigenschappen ervan kunnen worden gecombineerd om ons nauwkeurige controle over onze lay-outs te geven, met de eenvoudigst mogelijke syntaxis.