Het is niet nodig om het te begrijpen elk aspect van Flexbox voordat u kunt instappen en aan de slag kunt. In deze tutorial introduceren we enkele functies van Flexbox bij het ontwerpen van een "nieuwslay-out" zoals die te vinden is op The Guardian.
De reden dat we Flexbox gebruiken, is dat het zeer krachtige functies biedt:
we kunnen gemakkelijk responsieve kolommen maken
we kunnen kolommen van gelijke hoogte maken
we kunnen inhoud naar de bodem van een container
Dus laten we beginnen!
1. Begin met twee kolommen
Het maken van kolommen in CSS is altijd al een uitdaging geweest. Lange tijd waren de enige opties om vlotters of tabellen te gebruiken, maar ze hadden allebei hun eigen problemen.
Flexbox maakt het proces eenvoudiger en geeft ons:
schonere code: we hebben alleen een container nodig met weergave: flex
niet nodig duidelijk zweeft, waardoor onverwacht lay-outgedrag wordt voorkomen
semantische markup
flexibiliteit: we kunnen het formaat wijzigen, uitrekken en de kolommen in enkele regels CSS uitlijnen
Laten we beginnen met het maken van twee kolommen; één die 2/3 van de breedte van onze container is en één die 1/3 is.
2/3 kolom
1/3 kolom
Er zijn twee elementen hier:
de kolommen houder
twee kolom kinderen, een met een extra klas main-column die we zullen gebruiken om het breder te maken
Omdat de hoofdkolom een flexwaarde heeft van 2, het zal twee keer zoveel ruimte innemen als de andere kolom.
Door wat extra visuele stijlen toe te voegen, is dit wat we krijgen:
2. Maak van elke kolom een Flexbox-container
Elk van deze twee kolommen bevat verschillende artikelen die verticaal zijn gestapeld, dus we gaan de kolom elementen ook in Flexbox-containers. Wij willen:
de artikelen die verticaal moeten worden gestapeld
de artikelen aan uitrekken en vul de beschikbare ruimte in
.kolom weergave: flex; flex-richting: kolom; / * Maakt dat de artikelen verticaal worden gestapeld * / .article flex: 1; / * Rekt de artikelen uit om de resterende ruimte te vullen * /
De flex-richting: kolom regel op de houder, gecombineerd met de flex: 1 regel op de kinderen zorgt ervoor dat de artikelen de hele verticale ruimte opvullen, waardoor onze eerste twee kolommen dezelfde hoogte behouden.
3. Maak van elk artikel een Flexbox-container
Laten we nu, om ons extra controle te geven, elk artikel ook in een Flexbox-container veranderen. Elk van hen bevat:
een titel
een paragraaf
een informatiebalk met de auteur en het aantal reacties
een optionele responsieve afbeelding
We gebruiken hier Flexbox om de informatiebalk naar beneden te duwen. Ter herinnering: dit is de lay-out van het artikel waarnaar we streven:
Hier is de code:
.artikel display: flex; flex-richting: kolom; flex-basis: auto; / * stelt initiële elementgrootte in op basis van de inhoud * / .article-body display: flex; flex: 1; flex-richting: kolom; .artikelinhoud flex: 1; / * Hierdoor vult de inhoud de resterende ruimte, en duwt u de informatiebalk onderaan * /
De elementen van het artikel zijn verticaal opgemaakt dankzij de flex-richting: kolom; regel.
Wij zijn van toepassing flex: 1 naar de article-inhoud element zodat het de lege ruimte vult, en "duwt" article-info naar de bodem, ongeacht de hoogte van de kolommen.
4. Voeg enkele geneste kolommen toe
In de linkerkolom is wat we eigenlijk willen een andere set van kolommen. Dus we gaan het tweede artikel vervangen door hetzelfde kolommen container die we al hebben gebruikt.
Omdat we de eerste geneste kolom breder willen maken, voegen we er een toe geneste kolommen klasse met de extra stijl:
.geneste kolom flex: 2;
Dit maakt onze nieuwe kolom twee keer zo breed als de andere.
5. Geef het eerste artikel een Horizontale lay-out
Het eerste artikel is erg groot. Om het gebruik van de ruimte te optimaliseren, kunnen we de indeling van de ruimte horizontaal aanpassen.
De bestellen eigenschap is hier erg handig, omdat we hiermee de volgorde van HTML-elementen kunnen wijzigen zonder de HTML-opmaak te beïnvloeden. De article-image komt echt voor de article-body in de opmaak, maar het zal gedragen alsof het komt na.
6. Maak de lay-out responsief
Dit ziet er allemaal precies uit zoals we willen, hoewel het een beetje gepeperd is. Laten we dat oplossen door responsief te worden.
Een geweldige functie van Flexbox is dat u alleen de weergave: flex regel op de container om Flexbox volledig uit te schakelen, terwijl alle andere Flexbox-eigenschappen behouden blijven (zoals uitlijnen-items of buigen) Geldig.
Als gevolg hiervan kunt u een "responsieve" lay-out activeren door alleen Flexbox in te schakelen bovenstaande een bepaald breekpunt.
We gaan verwijderen weergave: flex van beide .kolommen en .kolom selectors, in plaats daarvan ze in een mediaquery in te pakken:
@media-scherm en (min-width: 800px) .columns, .column display: flex;
Dat is het! Op kleinere schermen staan alle artikelen op elkaar. Boven 800px worden ze in twee kolommen verdeeld.
7. Voeg afwerkingen toe
Om de lay-out aantrekkelijker te maken op grotere schermen, laten we wat CSS tweaks toevoegen:
Het eerste artikel heeft zijn inhoud horizontaal opgemaakt, met de tekst aan de linkerkant en de afbeelding aan de rechterkant. De hoofdkolom is nu ook breder (75%) en de geneste kolom ook (66%). Dit is het eindresultaat!
Conclusie
Ik hoop dat ik je heb laten zien dat je niet elk aspect van Flexbox hoeft te begrijpen om erin te springen en het te gebruiken! Deze responsieve nieuwslayout is een heel nuttig patroon; trek het uit elkaar, speel ermee, laat ons weten hoe je het doet!
Share
Wat je gaat creëren
Accentsconagua
