Det är inte nödvändigt att förstå varje aspekt av Flexbox innan du kan hoppa in och komma igång. I denna handledning kommer vi att introducera några funktioner i Flexbox samtidigt som vi utformar en "nyhetslayout" som den du hittar på The Guardian.
Anledningen till att vi använder Flexbox är att den ger mycket kraftfulla funktioner:
vi kan enkelt göra responsiva kolumner
vi kan göra kolumner med samma höjd
vi kan driva innehållet till botten av en behållare
Så låt oss börja!
1. Börja med två kolumner
Att skapa kolumner i CSS har alltid varit en utmaning. Under lång tid var de enda alternativen att använda floats eller bord, men de hade båda sina egna problem.
Flexbox gör processen enklare och ger oss:
renare kod: Vi behöver bara en behållare med display: flex
behövs inte klar floats, vilket förhindrar oväntat layoutbeteende
semantisk markup
flexibilitet: Vi kan ändra storlek, sträcka, justera kolumnerna i några rader av CSS
Låt oss börja med att göra två kolumner; en som är 2/3 av bredden på vår behållare, och en som är 1/3.
2/3 kolonn
1/3 kolonn
Det finns två element här:
de kolonner behållare
två kolumn barn, en med en ytterligare klass av main-kolonn som vi ska använda för att göra det bredare
Eftersom huvudkolumnen har ett flexvärde på 2, det tar upp dubbelt så mycket utrymme som den andra kolumnen.
Genom att lägga till några ytterligare visuella stilar, här är vad vi får:
2. Gör varje kolumn till en flexboxbehållare
Var och en av dessa två kolumner kommer att innehålla flera artiklar staplade vertikalt, så vi ska vända kolumn element i Flexbox behållare också. Vi vill:
Artiklarna ska staplas vertikalt
artiklarna till sträcka och fyll i ledigt utrymme
.kolumn display: flex; flex-riktning: kolumn; / * Gör artiklarna staplade vertikalt * / .artikel flex: 1; / * Sträcker artiklarna för att fylla upp det återstående utrymmet * /
De flex-riktning: kolumn regera på behållare, kombinerat med flex: 1 regera på barn säkerställer att artiklarna fyller hela vertikalutrymmet och håller våra första två kolumner i samma höjd.
3. Gör varje artikel en Flexbox Container
Nu, för att ge oss extra kontroll, låt oss vända varje artikel till en Flexbox-behållare också. Var och en av dem kommer att innehålla:
En titel
en paragraf
en informationsfält med författaren och antalet kommentarer
en valfri responsiv bild
Vi använder Flexbox här för att "trycka" informationsfältet längst ner. Som en påminnelse är det här artikeln som vi syftar till:
Här är koden:
.artikel display: flex; flex-riktning: kolumn; flex-bas: auto; / * anger initial elementstorlek baserat på dess innehåll * / .artikel-kropp display: flex; flex: 1; flex-riktning: kolumn; .artikelinnehåll flex: 1; / * Detta gör att innehållet fyller upp det återstående utrymmet och så trycker du informationsfältet längst ner * /
Artikelns element läggs vertikalt tack vare flex-riktning: kolumn; regel.
Vi ansöker flex: 1 till Artikel-innehåll element så att det fyller upp det tomma utrymmet och "trycker" på artikelinfo till botten, oavsett höjden på kolumnerna.
4. Lägg till några nestade kolumner
I den vänstra kolumnen är vad vi egentligen vill ha en annan uppsättning av kolumner. Så vi ska ersätta den andra artikeln med samma sak kolonner behållare som vi redan har använt.
Eftersom vi vill att den första kapslade kolumnen ska vara bredare lägger vi till en kapslade-kolonn klass med extra stil:
.nestad-kolonn flex: 2;
Detta gör vår nya kolumn dubbelt så bred som den andra.
5. Ge den första artikeln a Horisontell layout
Den första artikeln är väldigt stor. För att optimera användningen av utrymme, låt oss byta layout för att vara horisontell.
De ordning Egenskapen är väldigt användbar här, eftersom det tillåter oss att ändra ordningen av HTML-element utan att påverka HTML-markupen. De article-image faktiskt kommer innan de article-kropp i markeringen, men det kommer att verka som om det kommer efter.
6. Gör layouten Responsive
Det här är allt som vi vill ha, men det är lite knäppt. Låt oss fixa det genom att gå responsivt.
En bra funktion i Flexbox är att du bara behöver ta bort display: flex regla på behållaren för att inaktivera Flexbox helt, samtidigt som alla andra Flexbox-egenskaper behålls (t.ex. ALIGN-objekt eller böja) giltig.
Som ett resultat kan du utlösa en "responsiv" layout genom att endast aktivera Flexbox ovan en viss brytpunkt.
Vi ska ta bort display: flex från båda .kolonner och .kolumn selektörer, istället omsluta dem i en mediefråga:
@media skärm och (min bredd: 800px) .columns, .column display: flex;
Det är allt! På mindre skärmar kommer alla artiklar att ligga ovanpå varandra. Över 800 px läggs de ut i två kolumner.
7. Lägg till efterbehandling
För att göra layouten mer tilltalande på större skärmar, låt oss lägga till några CSS-tweaks:
Den första artikeln har sitt innehåll definierat horisontellt, med texten till vänster och bilden till höger. Huvudkolumnen är också nu bredare (75%) och även den nestade kolumnen (66%). Här är det slutliga resultatet!
Slutsats
Jag hoppas att jag har visat att du inte behöver förstå alla aspekter av Flexbox för att hoppa in och börja använda det! Denna responsiva nyhetslayout är ett riktigt användbart mönster; dra det ifrån varandra, leka med det, låt oss veta hur du går vidare!
Share
Vad du ska skapa
Accentsconagua
