Een inleiding tot de CSS Flexbox-module

CSS, ondanks zijn relatief lage ervaren skill-plafond, lijkt altijd een moordend element in zijn voordeel te hebben. Weet je nog hoe mediaquery's een responsieve lay-out mogelijk maakten en een revolutie teweegbrachten in de front-end ontwikkeling? Nou, vandaag gaan we het hebben over een nieuwe lay-outmodus, genaamd flexbox - nieuw in CSS3. Ik weet zeker dat je eropuit gaat! Laten we aan de slag na de sprong.

Latere wijzigingen in technieken & software

Bepaalde aspecten van toepassingen of technieken die in deze zelfstudie worden gebruikt, zijn gewijzigd sinds de publicatie oorspronkelijk werd gepubliceerd. Dit maakt het misschien een beetje moeilijk om mee te volgen. We raden u aan deze meer recente zelfstudies over hetzelfde onderwerp te bekijken:

Flexbox-wijzigingen
Github-kwestie

CSS Flexbox-ondersteuning

Momenteel is de CSS Flexbox-specificatie een werkconcept en dingen zullen veranderen! De voorbeelden in deze zelfstudie kunnen mogelijk in de toekomst niet werken, omdat browsers hun flexboximplementatie aanpassen aan de specificaties. Het doel van deze zelfstudie is om u een basiskennis van CSS flexbox te bieden en aan te tonen hoe u deze in uw webpagina's kunt gebruiken.

Houd er rekening mee dat deze zelfstudie webkit / niet-vendor-prefixed voorbeelden gebruikt ter wille van de bondigheid. Bekijk caniuse.com voor een lijst met browsers die de flexboxmodule ondersteunen en verwijs naar de benodigde voorvoegsels in uw projecten..

Achtergrond op lay-outmodi

CSS Flexbox is in wezen een lay-outmodus. Er zijn bestaande lay-outmodi binnen CSS en ze zijn er al een lange tijd. Een voorbeeld van een lay-outmodus is blok (bijvoorbeeld weergave: blok). Bloklay-outs zijn een prima manier om hele documenten op te maken, veel elementen worden standaard door de browser behandeld als blokniveau. deze omvatten gemeenschappelijke elementen, zoals paragrafen en divs.

Af en toe, als een element geen blok is, is dat waarschijnlijk zo in lijn. Inline level-elementen bevatten de ankertag, invoertag en de sterke tag. Met de ontwikkelaarstools in Chrome kunt u de 'berekende stijl' van een element bekijken, wat een geweldige manier is om te bepalen welke CSS-eigenschappen en -waarden zijn toegepast op elementen die niet expliciet zijn ingesteld door de ontwikkelaar.

Hier is een snelle tip voor toegang tot de computergestuurde stijl van een element met de methode window.getComputedStyle van JavaScript.

 var elem = document.querySelector ('h1 # someId'); window.getComputedStyle (elem) .display; //blok

Block en inline layout modes opzij, CSS heeft ook layled-modi voor lay-outs en lay-outs. Naar de reden van de lay-outmodus wordt verwezen, omdat flexbox een nieuwe lay-outmodus is, waardoor er meer flexibiliteit is bij het ontwerpen van webpagina's.

De lay-out van de flexbox biedt ons eenvoudige technieken om eenvoudig de manier te bepalen waarop items moeten worden ingedeeld.

Hoe kunt u Flexbox gebruiken??

Om een element te forceren om de flexbox-indeling te gebruiken, voegen we de flexbox waarde voor de weergave-eigenschap.

 #container weergave: flexbox;

Standaard is een flexbox een blokniveauelement; we kunnen een element inline-niveau definiëren zoals:

 #container display: inline-flexbox;

Vergelijkbaar met het bovenstaande voorbeeld, wil je de flexbox-lay-out toepassen op de ouder van de kinderen waarvan u de positie wilt bepalen. Laten we kijken naar eenvoudig, levend voorbeeld.

  Een item
 Een ander item
 Het laatste item

 ul / * Oude syntaxis * / weergave: -webkit-box; / * Nieuwe syntaxis * / weergave: -webkit-flexbox;

U zult opmerken dat de elementen van het lijstitem nu horizontaal lopen, vergelijkbaar met hoe ze zouden kunnen weergeven, als we ze hadden gebruikt zweven: links. De elementen van het lijstitem kunnen nu worden aangeduid als flexbox-items.

Opmerking: een directe afstammeling van een flexbox, die absoluut is gepositioneerd, b.v. gebruik makend van positie: absoluut, kan geen flexboxitem zijn, omdat het de gebruikelijke stroom breekt.

U kunt opmerken dat de items (de elementen van het lijstitem) een horizontale stroom hebben aangenomen (de richting van de stroom is ook bekend als de hoofdas). Gelukkig zijn we in staat om deze stroom (en dus wat wordt beschouwd als de hoofdas) te beheersen en het gebruik van drijvers te vermijden!

Exploring `flex-richting`

We kunnen de flex-richting eigendom en specificeer de richting waarin we onze flexbox-items wensen op te stellen. De accommodatie accepteert rij, rij achteruit, kolom en kolom achteruit als waarden. De standaardwaarde is rij.

Met dezelfde markup als het bovenstaande voorbeeld kunnen we nog een CSS-eigenschap toevoegen: waardepaar: (flex-richting: kolom)

 ul -webkit-flex-direction: kolom;

Als je meewerkt, ga je gang en probeer het te veranderen kolom waarde op de flex-richting eigendom aan column-reverse, en bekijk hoe de flexbox-items in een kolomvormige lay-out worden weergegeven, maar in de omgekeerde volgorde.

Inpakken met `flex-wrap`

Standaard is een flexbox een enkele regel. Een die zijn kinderen niet kan bevatten, kan overstromen met de flex-wrap eigendom; we kunnen de flexbox opdracht geven om multi-line te worden, in welk geval de flexbox-items kunnen omwikkelen. flex-wrap accepteert de waarden, nowrap (de standaardwaarde), wikkelen & wrap-reverse.

Merk op hoe, in de demo, de items 'overslaan', omdat ze niet kunnen worden ingesloten in hun kleine 100px ouder. Gebruik de ontwikkelaarstools en wissel de overloop verborgen en -webkit-flex-wrap bits. Zonder de flex-wrap en overloop eigenschappen, de items hun ouder overlopen.

Er is een handige steno-eigenschap voor flex-richting en flex-wrap, zoals hieronder getoond:

 flex-richting: rij; flex-wrap: nowrap; // Met behulp van de twee bovenstaande waarden met de flex-flow steno krijgen we: vloed-flow: rij nowrap; // flexrichting: kolom; flex-wrap: wrap; flex-flow: kolomomwikkeling;

Een Quickie-voorbeeld

Hoewel dit zeker niet het mooiste is dat er is, demonstreert dit voorbeeldmenu enkele toepassingen voor flexbox.

Een breedte van 300px is ingesteld op de flexbox zelf om verpakking te demonstreren.
Een algemeen idee voor een menu zou kunnen zijn om mediaquery's te gebruiken om een mobielvriendelijk menu te bedienen, waar flex-richting: kolom kan logisch zijn.

Wat leuk zou zijn, is om de flexbox-items te instrueren zich te verspreiden en de beschikbare ruimte te gebruiken - zoiets als dit. Dat is waar het flex-eigendom voor is.

Flexing

Buigen is het vermogen van de container om de breedte of hoogte ervan te wijzigen om de beschikbare ruimte te vullen. "

De buigen eigendom is een leuke functie; het biedt iets nieuws dat in het verleden moeilijk te bereiken was.

Met deze eigenschap kunnen we een voorkeursgrootte voor onze artikelen instellen. Houd er rekening mee dat de flex-eigenschap wordt toegepast op flexbox-items, niet op de flexbox zelf. De browser zal proberen de grootte van de flexbox-items in te stellen op a per regelbasis. Vervolgens probeert het de resterende vrije ruimte op de items gelijkmatig te verdelen. Als we naar het menu-voorbeeld kijken en de ontwikkelaarstools gebruiken om de berekende breedte van de flexbox-items te ontdekken, zien we dat het 78px. Laten we het verder onderzoeken ...

Je vraagt je waarschijnlijk af, "Hoe kregen de flexbox-items hun extra ruimte wanneer we hun gewenste breedte instelden? 60px?"

In de eerste regel zijn er drie items, die rond zouden moeten zijn 60pxflex eigendom (dat is een totaal van 180px).
De breedte van de hele flexbox is 300px. Dat, minus 180px (de totale gewenste grootte van de items), is 120px. Het lijkt er echter niet op dat we daadwerkelijk hebben 120px van vrije ruimte.
Elk flexbox-item heeft een margin-right van 10px; dat is een totaal van 30px voor drie items, ons achterlatend 90px van vrije ruimte.
Maar wacht, elk item heeft ook opvulling: 5px - dat is 5px van opvulling boven, rechts, onder en links. Dus, vergelijkbaar met de margin-right eigendom, elk item verbruikt 10px van opvulling met betrekking tot de breedte. We blijven achter 60px van vrije ruimte - nou bijna.
Elk item heeft rand: 1px effen zwart - 1px aan de linker- en rechterkant. Een totaal van twee pixels per item, dus voor drie items komt dat 6px. We zijn nu achtergebleven 54px van vrije ruimte.
Met 54px van vrije ruimte, kunnen we dat gelijk verdelen over de drie items op de eerste regel - dat is 18px, per item, wat nu logisch is, waarom, wanneer we een voorkeur hebben voor 60px, de berekende breedte omgezet in 78px.

Zoals je misschien al geraden had, buigt de laatste regel (met het item 'Contact met ons opnemen') over de volle breedte van de flexbox.

Flexbox-items kunnen verschillende breedten worden gegeven; een item met een buigen van 2 schijnt zo te zijn twee keer zo flexibel als een item met een buigen van 1. Dus als het gaat om het verdelen van vrije ruimte tussen de twee items, is het item met een buigen van 1 krijgt de helft van de ruimte die het item met een heeft buigen van 2 ontvangt.

Bestellen

Flexbox geeft ons een eenvoudige manier om bepaalde items te bestellen met behulp van CSS, ongeacht de volgorde waarin ze in het document voorkomen. Hier is een snel voorbeeld.

Gezien de volgende markup:

  Item 1
 Item 2
 Item 3

 ul display: -webkit-flexbox;  ul li: nth-child (1) -webkit-flex-order: 2;

We kunnen het eerste element van het lijstitem targeten met behulp van de pseudo-klasse nth-child en vervolgens de flex-order eigendom ervan. Flexbox-items zijn standaard op bestelling 0. Door het eerste lijstitem op bestelling te plaatsen 2, de browser toont de items 2 & 3 als eerste, gevolgd door item 1.

opstelling

We kunnen flexbox-items op de hoofdas uitlijnen met behulp van de flex-pack eigendom. Deze eigenschap accepteert de volgende waarden:

begin
einde
centrum
rechtvaardigen
verdelen

De demo voor deze zelfstudie bevat enkele voorbeelden van de verschillende soorten uitlijning. Als we naar het jbin-voorbeeld kijken, kunnen we zien dat de items alleen op één as zijn gecentreerd: de hoofdas. Dit is in wezen de as waarop de flexbox-items worden geplaatst.

We kunnen de as veranderen door de flex-richting eigendom. Door het in te stellen kolom, het wordt duidelijk dat de hoofdas is veranderd. Om de uitlijning van de dwarsas (de as loodrecht op de hoofdas) die we kunnen gebruiken te beïnvloeden flex-align.

Een artikel centreren

  Ik zou gecentreerd moeten zijn

 .flexbox weergave: -webkit-flexbox; -webkit-flex-pack: centrum; -webkit-flex-align: midden; breedte: 50%; hoogte: 100 px; achtergrond: oranje;  .flexbox p border: 1px effen groen; opvulling: 5px;

Bekijk zeker de live demo als je in de war bent.

Verder lezen

flexiejs biedt cross-browser ondersteuning voor flexbox.
Modernizr kan ondersteuning voor flexbox detecteren.
html5rocks bevat een tutorial over flexbox
Alex Russell, die op Google Chrome werkt, heeft een interessante set CSS-klassen voor het gebruik van flexbox.
inserthtml heeft een leuke zelfstudie over de flexbox-specificatie, deze bevat een groot aantal visuals die kunnen helpen bij het begrijpen van bepaalde concepten.
Het boek Stunning CSS3 heeft een gedeelte over flexbox.

Bedankt voor het lezen en vergeet niet om naar caniuse.com te verwijzen voor een lijst met browsers die de flexbox-module ondersteunen, evenals naar de leveranciersprefixen waarnaar moet worden verwezen.

Code