Hvordan bygge en nyhetsnettstedlayout med Flexbox

Det er ikke nødvendig å forstå hver aspekt av Flexbox før du kan hoppe inn og komme i gang. I denne opplæringen skal vi presentere noen få funksjoner i Flexbox mens du designer en "nyhetsoppsett" som den du finner på The Guardian.

Grunnen til at vi bruker Flexbox er at den gir svært kraftige funksjoner:

• Vi kan enkelt lage lydhørste kolonner
• vi kan lage kolonner av samme høyde
• Vi kan skyve innhold til bunn av en beholder

Så la oss komme i gang!

1. Start med to kolonner

Å lage kolonner i CSS har alltid vært en utfordring. I lang tid var de eneste alternativene å bruke flyter eller tabeller, men de hadde begge sine egne problemer.

Flexbox gjør prosessen enklere, og gir oss:

• renere kode: Vi trenger bare en container med skjerm: flex
• ikke nødvendig klar flyter, og forhindrer uventet layoutadferd
• semantisk markering
• fleksibilitet: Vi kan endre størrelse, strekke, justere kolonnene i noen få linjer med CSS

La oss begynne med å lage to kolonner; en som er 2/3 av bredden på vår container, og en som er 1/3.

 
 2/3 kolonne 
 
 1/3 kolonne 
 

Det er to elementer her:

1. de kolonner container
2. to kolonne barn, en med en ekstra klasse av hoved-kolonne som vi skal bruke for å gjøre det bredere

.kolonner display: flex;  .column flex: 1;  .main-kolonne flex: 2; 

Som hovedkolonnen har en fleksibel verdi på 2, det vil ta opp dobbelt så mye plass som den andre kolonnen.

Ved å legge til noen ekstra visuelle stiler, er det hva vi får:

2. Gjør hver kolonne en Flexbox Container

Hver av disse to kolonnene vil inneholde flere artikler stablet vertikalt, så vi skal slå kolonne elementer i Flexbox beholdere også. Vi vil:

• artiklene skal stables vertikalt
• artiklene til tøye ut og fyll ut ledig plass

.kolonne display: flex; flex-retning: kolonne; / * Gjør artiklene stablet vertikalt * / .artikkel flex: 1; / * Streker artiklene for å fylle opp gjenværende plass * /

De flex-retning: kolonne regjere på container, kombinert med flex: 1 regjere på barn sikrer at artiklene fyller hele vertikalrommet, og holder de to første kolonnene i samme høyde.

3. Gjør hver artikkel en Flexbox Container

Nå, for å gi oss ekstra kontroll, la oss omdanne hver artikkel til en Flexbox-beholder også. Hver av dem vil inneholde:

• en tittel
• en paragraf
• en informasjonslinje med forfatteren og antall kommentarer
• et valgfritt responsivt bilde

Vi bruker Flexbox her for å "skyve" informasjonslinjen til bunnen. Som en påminnelse er dette artikkellayouten vi sikter på:

Her er koden:

.artikkel display: flex; flex-retning: kolonne; flex-basis: auto; / * angir innledende elementstørrelse basert på innholdet sitt / / .artikkel-body display: flex; flex: 1; flex-retning: kolonne;  .artikkelinnhold flex: 1; / * Dette vil gjøre innholdet fylle opp gjenværende plass, og dermed skyve informasjonsfeltet nederst * /

Artikkelens elementer er lagt ut vertikalt takket være flex-retning: kolonne; regel.

Vi søker flex: 1 til artikkel-innhold element slik at det fyller opp det tomme rommet, og "skyver" den artikkel info til bunnen, uansett høyden på kolonnene.

Som vi vil at den første nestede kolonnen skal være bredere, legger vi til en nestede-kolonne klasse med tilleggsstilen:

.nestet-kolonne flex: 2; 

Dette vil gjøre vår nye kolonne dobbelt så bred som den andre.

.første artikkel flex-retning: rad; . første artikkel .artikkel-kropp flex: 1; . første artikkel .artikkel-bilde høyde: 300px; rekkefølge: 2; polstring: 0; bredde: 400px; 

@media skjerm og (min bredde: 800px) .columns, .column display: flex; 

@media skjerm og (min-bredde: 1000px) .first-artikkel flex-retning: rad; . første artikkel .artikkel-kropp flex: 1; . første artikkel .artikkel-bilde høyde: 300px; rekkefølge: 2; polstring: 0; bredde: 400px;  .Main-kolonne flex: 3;  .nested-column flex: 2;