Accentsconagua
Här är det första föremålet
Här är nästa sak
Den tredje punkten
Det fjärde objektet
Share
Om du började skriva CSS för några år sedan är chansen att du har blivit vana vid några käften av CSS-layouter som du har tagit för att vara oundviklig. Exempelvis använder man absolut positionerade element inuti relativt positionerade element eller använder clearfix i samband med flottor för att uppnå kolonnytor.
Intuitivt, vi har alla trodde att det borde vara ett bättre sätt. Det är ju lite konstigt att den bästa lösningen för vertikal centrering har medverkat display: tabell; och tillhörande stilar. Varför ska vi använda hacka att göra grundläggande saker fungerar?
De flexibel låda modul eller Flexbox för kort är den framväxande lösningen till många av våra tidigare woes, och passar en mängd designmönster som blivit utbredd. Den grundläggande tanken bakom flexbox är att låta den innehållande rutan med element för att ändra storlek och ombeställa dessa element för att passa behållaren på ett lämpligt sätt.
Flexbox är inte avsedd för användning i hela världen. CSS-gridspecifikationen är i arbetena för att ta itu med det här problemet, men tyvärr finns det fortfarande ett mycket mindre stödjande tillstånd än flexbox, som åtminstone delvis stöder alla webbläsare utom Opera Mini. Däremot stöds CSS-gridspecifikationen helt enkelt av IE, med okänt eller inget stöd i alla andra webbläsare.
Flexbox är avsedd att användas för diskreta delar av en layout. I den här artikeln kommer vi att täcka några vanliga uppgifter som kan utföras mer effektivt med flexbox och förklara syntaxen för hur vi uppnår särskilda resultat. För att få en fullständig översikt över alla fastighetsalternativ, ta en titt på CSS Tricks-posten på flexboxen. En guide till Flexbox.
Innan flexbox var vertikal centrering av dynamiskt innehåll en icke trivial uppgift. (Se den här smashing Mag-inlägget liksom den här CSS-Tricks-artikeln för hela berättelsen.) Med flexbox har allt bara blivit enklare. Vi lägger upp en grundläggande behållare med barnelement.
Testning av vertikalt centrumEtt sekundärt testTertiär är för tre
Vårt mål är att centrera dessa element vertikalt och horisontellt. Med flexbox är det så enkelt som följande:
.behållare bredd: 500px; höjd: 500px; marginal: 0 auto; bakgrundsfärg: #dedede; / * Flex regler * / display: flex; flex-flöde: kolumn nurap; rättfärdiga innehåll: center; align-items: center;
Notera: att vi inte använder säljarens prefixade versioner, men du borde! Alternativt, ta en titt på Autoprefixer.
Du har märkt några okända nya regler som tillämpas här. Flexbox är en modul som omfattar ett antal egenskaper. För att börja, display: flex skapar vår flexboxbehållare och dess barnelement behandlas automatiskt som flexobjekt.
Om inte annat anges, kommer våra flexposter att strömma inlinje längs huvudaxeln. dock, flex-flöde (som är stenografi för flex-riktningen och flex-wrap egenskaper) kan förändra både huvud- och korsaxlarna. flex-flöde: kolumn nurap berättar flexbox att vi vill att innehållet ska visas i en vertikal kolumn och att vi inte vill att våra artiklar ska vikas (tvinga dem att hoppa till nästa rad).
motivera-innehåll till Centrum, som justerar våra föremål till mitten av huvudaxeln, vilket är baserat på den riktning som definieras av flex-flöde, i detta fall den vertikala axeln. align-items: center justerar våra objekt i förhållande till den sekundära ("cross") axeln.
Det finns ett inneboende problem med ett traditionellt tillvägagångssätt för layout, speciellt när det gäller responsivt innehåll. När man använder floats är det till exempel lätt att se innehållet på en sida i en helt annan ordning än vad som är naturlig eller kognitiv. Det är dessutom mycket svårt att manipulera ordningen av element på en sida. Med flexbox ska vi ta itu med en av de svårare att uppnå layouterna för traditionell CSS; en toppjusterad, omvänd beställd stapling av element. Så, med andra ord, det element som visas först i markeringen visas sista på skärmen, och lägga till nya element i botten av markeringen får dem att visas överst på skärmen.
Vi använder denna markering:
Med följande CSS kan vi uppnå det vi försöker göra enkelt.
huvud position: relativ; höjd: 100%; display: flex; flex-flöde: kolumn-back nowrap; motivera innehåll: flex-end; align-items: center;
Detta kommer att ge oss exakt det vi strävar efter. Se resultaten (med några extra stilar för enklare visning) här.
Genom att skapa en kolumn-omvänd på flex-flöde, vi frågar flexbox för att vända ordningens order. Vi vill anpassa innehållet till slutet av flexboxens tvärled, vilket i fallet med den omvända kolumnen är en vertikal linje som löper från botten av lådan till toppen.
Vi har också satt rikta-poster: center för att centrera objekten i kolumnen horisontellt. Detta är användbart för någon form av stapling av element, där den kognitiva ordningen (först till sist) inte matchar den visuella ordningen (topp till botten).
Det finns många situationer där du måste omordna element baserat på din skärmstorlek. De vanliga lösningarna på det här problemet är vanligtvis förfallna, eller de upprepar markeringen. Titta på det här exemplet, där vi har flyttat en utrustad bild från att vara i flödet av en artikel till början av artikeln med hjälp av det enkla ordning fast egendom. Vi använder följande HTML:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiell eaque unde auta porro accusamus placea earum qui quia quidem totam harum odit voluptates?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem provident voluptas commodi atque. Konsekvensen är inte den normala uppgiften att utöva sapiente dolorem explicabo somperiores soluta unde är voluptatibus flykting officia quo.
Och den medföljande CSS:
huvud display: flex; flex-flöde: radomslag; img flex-grow: 1; bredd: 200px; beställning: 3; p flex: 1 auto; beställning: 1; vaddering: 10px; bakgrundsfärg: #dedede; marginal: 0; p: nth-child (3) order: 2; flex: 3 0 50px; @media endast skärm och (maxbredd: 600px) img order: 1; p flex: 1 auto; beställning: 2; vaddering: 10px; bakgrundsfärg: #dedede; marginal: 0; p: nth-child (3) order: 3; flex: 3 0 50px;
Detta är bara toppen av isberget när det gäller kraften som tillhandahålls av flexbox för att göra i ett fåtal linjer kod som vanligtvis är mycket svårare att uppnå.
Hur många gånger har du blivit frustrerad att 100/3 var omöjligt att göra, och sedan tillgripa att skapa 99,9% bredd kolumner, bara för att inse hur fattig av en lösning som är? Flexbox fixar detta problem en gång för alla. Ta markeringen:
TestningTestningTestning
Och lägg till CSS för att få alla tre kolumnerna att visas, perfekt beräknade.
.behållare display: flex; rättfärdiga innehåll: center; justeringsinnehåll: mellanslag mellan; bakgrundsfärg: #dadada; .kolumn bredd: 100%; vaddering: 50px; text-align: center; boxskugga: 0 0 10px # c0c0c0;
Vill du ha en liten rännan? Inga problem. Lägg helt enkelt till marginalen till din .kolumn klass. Beräkningarna för korrekt avstånd görs för dig.
Ta en titt på det fantastiska GitHub-repoet "Löst genom Flexbox" för fler exempel. Flexbox är en kraftfullt kraftfull modul, som vi hoppas har bevisats genom denna artikel. Vad är några andra kraftfulla och spännande användarfall du ser för flexbox? Låt oss veta i kommentarerna!
