Accentsconagua
Dit is het eerste item
Dit is het volgende item
Het derde item
Het vierde item
Share
Als je een paar jaar geleden CSS bent gaan schrijven, is de kans groot dat je bent gewend geraakt aan een paar eigenaardigheden van CSS-lay-outs die je als onvermijdelijk hebt beschouwd. Bijvoorbeeld door absoluut gepositioneerde elementen in relatief gepositioneerde elementen te gebruiken of te gebruiken Clearfix in combinatie met drijvers om kolomroosters te bereiken.
Intuïtief, we hebben allemaal gedacht dat er een betere manier zou moeten zijn. Het is tenslotte een beetje vreemd dat de beste oplossing voor verticaal centreren gebruik betrof -display: table; en bijbehorende stijlen. Waarom zouden we gebruiken? hacks om fundamentele dingen te laten werken?
De flexibele doos module, of flexbox kortom, is de nieuwe oplossing voor veel van onze ellende in het verleden en past bij een groot aantal ontwerppatronen die veel voorkomen. Het basisidee achter flexbox is om het mogelijk te maken dat de bevattende box met elementen het formaat wijzigen en die elementen opnieuw rangschikken om de container op de juiste manier te passen.
Flexbox is niet bedoeld voor gebruik op de hele site. De CSS-grid-specificatie is in de maak om dat probleem aan te pakken, maar helaas is het nog steeds in een veel minder ondersteunde staat dan flexbox, die in elk van de browsers, met uitzondering van Opera Mini, ten minste gedeeltelijke ondersteuning biedt. De CSS-rasterspecificatie daarentegen wordt alleen volledig ondersteund door IE, met onbekende of geen ondersteuning in alle andere browsers.
Flexbox is bedoeld voor discrete delen van een lay-out. In dit artikel bespreken we een aantal veelvoorkomende taken die effectiever met flexbox kunnen worden uitgevoerd en leggen we de syntaxis uit voor het bereiken van bepaalde resultaten. Om een volledig overzicht te krijgen van alle eigenschappen, bekijk het CSS Tricks-bericht op flexbox A Guide to Flexbox.
Vóór flexbox was het verticaal centreren van dynamische inhoud een niet-triviale taak. (Zie deze Smashing Mag-post en dit artikel in CSS-Tricks voor het volledige verhaal.) Met flexbox werd alles eenvoudiger. We zullen een basiscontainer met onderliggende elementen opzetten.
Verticaal midden testenEen secundaire testTertiair is voor drie
Ons doel is om deze elementen verticaal en horizontaal te centreren. Met flexbox is het zo simpel als het volgende:
.container breedte: 500px; hoogte: 500 px; marge: 0 auto; achtergrondkleur: #dedede; / * Flexregels * / weergave: flex; flex-flow: kolom nowrap; justify-content: center; align-items: center;
Notitie: dat we de voorgedefinieerde versies van de leverancier niet gebruiken, maar dat zou wel moeten! Of kijk eens naar Autoprefixer.
U zult enkele onbekende nieuwe regels hebben opgemerkt die hier worden toegepast; Flexbox is een module die een aantal eigenschappen omvat. Om te beginnen, de weergave: flex maakt onze flexbox-container en de onderliggende elementen worden automatisch behandeld als flexitems.
Tenzij anders vermeld, stromen onze flexitems in lijn langs de hoofdas. Echter, flex-flow (dat is steno voor de flex-richting en flex-wrap eigenschappen) kan zowel de hoofd- als de dwarsassen wijzigen. flex-flow: kolom nowrap vertelt flexbox dat we onze inhoud in een verticale kolom willen laten weergeven en dat we niet willen dat onze items worden ingepakt (waardoor ze gedwongen worden naar de volgende rij te springen).
rechtvaardigen-inhoud naar centrum, waarmee onze items worden uitgelijnd met het midden van de hoofdas, die is gebaseerd op de richting die wordt bepaald door de flex-flow, in dit geval de verticale as. align-items: center lijnt onze items uit ten opzichte van de secundaire ("kruis") as.
Er is een inherent probleem met een traditionele benadering van lay-out, vooral als het gaat om responsieve inhoud. Bij het gebruik van drijvers, bijvoorbeeld, is het gemakkelijk om de inhoud van een pagina in een totaal andere volgorde te zien dan natuurlijk of cognitief. Bovendien is het erg moeilijk om de volgorde van elementen op een pagina te manipuleren. Met flexbox gaan we een van de moeilijker bereikbare lay-outs voor traditionele CSS aanpakken; een uitgelijnde, omgekeerd geordende stapeling van elementen. Dus, met andere woorden, het element dat verschijnt eerste in de opmaak verschijnt laatste op het scherm verschijnen en als nieuwe elementen onder aan de markering worden toegevoegd, verschijnen ze boven aan het scherm.
We gebruiken deze opmaak:
Met de volgende CSS kunnen we bereiken wat we proberen te bereiken.
hoofd positie: relatief; hoogte: 100%; weergave: flex; flex-flow: kolom-reverse nowrap; justify-content: flex-end; align-items: center;
Dit zal ons precies geven wat we nastreven. Bekijk de resultaten (met een paar extra stijlen om ze gemakkelijker te kunnen bekijken) hier.
Door een kolom-reverse te maken op de flex-flow, we vragen flexbox om de volgorde van de items om te keren. We willen de inhoud uitlijnen met het uiteinde van de flexbox-dwarslijn, die in het geval van de omgekeerde kolom een verticale lijn is die loopt van de onderkant van de doos naar de bovenkant.
We hebben ook vastgesteld uitlijnen-items: center om de items in de kolom horizontaal te centreren. Dit is handig voor elke stapeling van elementen, waarbij de cognitieve volgorde (first to last) niet overeenkomt met de visuele volgorde (van boven naar beneden).
Er zijn tal van situaties waarin je elementen opnieuw moet ordenen op basis van je schermgrootte. De gebruikelijke oplossingen voor dit probleem zijn meestal ingewikkeld of ze herhalen de opmaak. Kijk naar dit voorbeeld, waar we een aanbevolen afbeelding verplaatsen van het in de loop van een artikel naar het begin van het artikel gaan met het simpele bestellen eigendom. We gebruiken de volgende HTML:
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unde aut ea porro accusamus placeat earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Autem voorzorg voluptas commodi atque. Consequatur non-natus earum nobis exercitationem sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.
En de bijbehorende CSS:
hoofd display: flex; flex-flow: rijomwikkeling; img flex-grow: 1; breedte: 200 px; volgorde: 3; p flex: 1 auto; volgorde: 1; opvulling: 10px; achtergrondkleur: #dedede; marge: 0; p: nth-child (3) order: 2; flex: 3 0 50px; @media only screen en (max-width: 600px) img order: 1; p flex: 1 auto; volgorde: 2; opvulling: 10px; achtergrondkleur: #dedede; marge: 0; p: nth-child (3) order: 3; flex: 3 0 50px;
Dit is slechts het topje van de ijsberg als het gaat om de kracht van flexbox om te doen in een paar regels code, wat vaak moeilijker te bereiken is.
Hoe vaak ben je gefrustreerd dat 100/3 onmogelijk was om te doen en gebruik je vervolgens om kolommen met een breedte van 99,9% te maken, gewoon om te beseffen hoe slecht een oplossing is? Flexbox lost dit probleem voor eens en altijd op. Neem de markup:
testentestentesten
En voeg de CSS toe om alle drie de kolommen te laten verschijnen, perfect berekend.
.container weergave: flex; justify-content: center; align-content: ruimte-tussen; achtergrondkleur: #dadada; .column width: 100%; opvulling: 50px; text-align: center; vakschaduw: 0 0 10px # c0c0c0;
Wil je een beetje goot? Geen probleem. Voeg eenvoudig marge toe aan uw .kolom klasse. De berekeningen voor de juiste spatiëring worden voor u gedaan.
Bekijk de geweldige GitHub repo "Solved By Flexbox" voor meer voorbeelden. Flexbox is een enorm krachtige module, zoals we hopen dat is bewezen door dit artikel. Wat zijn enkele andere krachtige en opwindende use-cases die je voor flexbox ziet? Laat het ons weten in de comments!
