Hej, habr!

En vacker kväll, utan att förebåda något intressant, fick vår chatt ett förslag från författaren till publikationen "Translating 5 Really Useful Responsive Markup Templates into Code", som han skrev våren 2012, om att skriva en remake-artikel, men med hjälp av FlexBox och en medföljande förklaring av vad och hur fungerar. Efter vissa tvivel vann intresset för att förstå specifikationen djupare fortfarande och jag satte mig glatt ner för att skriva upp samma exempel. När vi fördjupade oss i detta område började många nyanser bli tydliga, som växte till något mer än att bara göra om layouterna. I allmänhet vill jag i den här artikeln prata om en sådan underbar specifikation som heter "CSS Flexible Box Layout Module" och visa en del av den intressanta funktioner och tillämpningsexempel. Jag bjuder in alla som är intresserade att gå med i hacket.

Det jag skulle vilja uppmärksamma dig på är att för att skapa en layout på FlexBox kommer utvecklaren att behöva en viss grad av anpassning. Från mitt eget exempel kände jag att många års erfarenhet spelade ett grymt skämt. FlexBox kräver ett lite annorlunda sätt att tänka på att rada upp element i ett flöde.

Teknisk del

Innan du går vidare till några exempel är det värt att förstå vilka egenskaper som ingår i denna specifikation och hur de fungerar. Eftersom vissa av dem inte är särskilt tydliga från början, och vissa är omgivna av myter som inte har något med verkligheten att göra.

Så. FlexBox har två huvudtyper av element: Flex Container och dess barnelement- Flexartikel. För att initiera behållaren, tilldela bara elementet via css display: flex; eller display: inline-flex;. Skillnaden mellan flex och inline-flex ligger bara i principen om interaktion med elementen som omger behållaren, liknande display: block; och display: inline-block;, respektive.

Två axlar skapas inuti en flexibel behållare, huvudaxeln och den vinkelräta eller tväraxeln. Mestadels flexibla element är inriktade längs huvudaxeln och sedan längs tväraxeln. Som standard är huvudaxeln horisontell och riktad från vänster till höger, och tväraxeln är vertikal och riktad uppifrån och ned.

Riktningen på axlarna kan styras med en css-egenskap flex-riktning. Den här egenskapen har ett antal värden:
rad(standard): Flexbehållarens huvudaxel har samma orientering som inlineaxeln för det aktuella läget för radriktning. Starten (huvudstart) och slutet (huvudänden) av huvudaxelns riktning motsvarar början (inline-start) och slutet (inline-slut) av inline-axeln.
rad-omvänd: Allt är detsamma som i rad, endast huvudstart och huvudände byts om.
kolumn: samma som rad, bara nu är huvudaxeln riktad uppifrån och ned.
kolumn-omvänd: samma som rad-omvänd, endast huvudaxeln är riktad från botten till toppen.
Du kan se hur detta fungerar i exemplet på jsfiddle.

Som standard placeras alla flexartiklar i en behållare på en rad, även om de inte passar in i behållaren sträcker de sig utanför dess gränser. Detta beteende växlas med hjälp av egenskapen flex-wrap. Den här egenskapen har tre tillstånd:
nurap(standard): Flexobjekt radas upp på en enda rad från vänster till höger.
slå in: flexibla element är byggda i multi-line-läge, överföring utförs i riktning mot tväraxeln, från topp till botten.
wrap-reverse: samma som omslag, men omsluter från botten till toppen.
Låt oss titta på ett exempel.

För bekvämlighets skull finns det ytterligare en fastighet flex-flöde, där du samtidigt kan ange flex-riktning Och flex-wrap. Det ser ut så här: flex-flöde:

Element i en behållare kan justeras med hjälp av egenskapen motivera-innehåll längs huvudaxeln. Den här egenskapen tar så många som fem olika alternativ värden.
flex-start(standard): Flexelement är justerade till utgångspunkten för huvudaxeln.
flex-ände: element är inriktade mot slutet av huvudaxeln
Centrum: Elementen är justerade mot mitten av huvudaxeln
mellanslag: element upptar hela den tillgängliga bredden i behållaren, de yttersta elementen pressas tätt mot behållarens kanter och det fria utrymmet är jämnt fördelat mellan elementen.
utrymme runt: Flexibla element är inriktade så att ledigt utrymme är jämnt fördelat mellan elementen. Men det är värt att notera att utrymmet mellan behållarens kant och de yttre elementen kommer att vara hälften så mycket som utrymmet mellan elementen i mitten av raden.
Självklart kan du klicka på ett exempel på hur den här egenskapen fungerar.

Det är inte allt, vi har också förmågan att rikta in element längs tväraxeln. Genom att ansöka om fastigheten align-objekt, som också tar fem olika värden, kan du uppnå intressant beteende. Den här egenskapen låter dig justera element i en rad i förhållande till varandra.
flex-start: alla element skjuts till början av raden
flex-ände: element skjuts till slutet av raden
Centrum: element är justerade mot mitten av raden
baslinje: Elementen justeras till textens baslinje
sträcka(standard): element sträcks ut för att fylla hela raden.

En annan egenskap som liknar den föregående är anpassa-innehåll. Det är den enda som är ansvarig för att rikta in hela linjer i förhållande till flexbehållaren. Det har ingen effekt om flexobjekt upptar en rad. Fastigheten har sex olika värden.
flex-start: alla linjer pressas till början av tväraxeln
flex-ände: alla linjer pressas till slutet av tväraxeln
Centrum: Alla packlinjer är inriktade mot mitten av tväraxeln
mellanslag: linjer fördelas från överkant till botten, vilket lämnar fritt utrymme mellan linjerna, medan de yttersta linjerna pressas mot kanterna på behållaren.
utrymme runt: Linjerna är jämnt fördelade i behållaren.
sträcka(standard): linjer sträcks ut för att ta upp allt tillgängligt utrymme.
Du kan prova hur align-items och align-content fungerar i det här exemplet. Jag presenterade specifikt dessa två egenskaper i ett exempel, eftersom de interagerar ganska tätt, var och en utför sin egen uppgift. Lägg märke till vad som händer när element placeras på en rad eller på flera rader.

Vi har sorterat ut parametrarna för en flexibel behållare, allt som återstår är att ta reda på egenskaperna hos flexibla element.
Den första fastigheten vi kommer att bekanta oss med är beställa. Den här egenskapen låter dig ändra positionen för ett specifikt element i strömmen. Som standard har alla flexobjekt ordning: 0; och är byggda i ordning efter naturligt flöde. I exemplet kan du se hur element byts ut om olika ordningsvärden tillämpas på dem.

En av de viktigaste egenskaperna är flex-bas. Med den här egenskapen kan vi specificera basbredden för ett flexobjekt. Standardvärdet är bil. Denna fastighet är nära besläktad med flex-växa Och flex-krympa, som jag kommer att prata om lite senare. Accepterar ett breddvärde i px, %, em och andra enheter. I huvudsak är detta inte strikt bredden på flexelementet, det är en slags utgångspunkt. I förhållande till vilket elementet sträcker sig eller krymper. I autoläge får elementet en basbredd i förhållande till innehållet inuti det.

flex-växa på flera resurser har den en helt felaktig beskrivning. Det står att det anger förhållandet mellan storlekarna på elementen i behållaren. Detta är faktiskt inte sant. Den här egenskapen anger elementets förstoringsfaktor om det finns fritt utrymme i en behållare. Som standard har den här egenskapen ett värde på 0. Låt oss föreställa oss att vi har en flexbehållare som har en bredd på 500px, inuti den finns två flexobjekt, var och en med en basbredd på 100px. Detta lämnar ytterligare 300 px ledigt utrymme i behållaren. Om vi ​​anger flex-grow: 2; för det första elementet och flex-grow: 1; för det andra elementet. Som ett resultat kommer dessa block att ta upp hela den tillgängliga bredden av behållaren, endast bredden på det första blocket kommer att vara 300px och det andra endast 200px. Vad hände? Det som hände är att de tillgängliga 300px ledigt utrymme i behållaren fördelades mellan elementen i ett 2:1-förhållande, +200px för det första och +100px för det andra. Det är faktiskt så det fungerar.

Här går vi smidigt vidare till en annan liknande fastighet, nämligen flex-krympa. Standardvärdet är 1. Det anger också en faktor för att ändra bredden på element, bara i motsatt riktning. Om behållaren har en bredd mindreän summan av elementens grundbredd, träder denna egenskap i kraft. Till exempel har behållaren en bredd på 600px, och flex-basen för elementen är 300px. Ge det första elementet flex-shrink: 2;, och det andra elementet flex-shrink: 1;. Låt oss nu krympa behållaren med 300px. Därför är summan av elementens bredd 300px större än behållaren. Denna skillnad är fördelad i ett 2:1-förhållande, så vi subtraherar 200px från det första blocket och 100px från det andra. Den nya storleken på elementen är 100px och 200px, för det första respektive andra elementet. Om vi ​​sätter flex-shrink till 0, förhindrar vi elementet från att krympa till en storlek som är mindre än dess basbredd.

Det här är faktiskt en väldigt förenklad beskrivning av hur det hela fungerar, så att det är tydligt allmän princip. Mer detaljerat, om någon är intresserad, beskrivs algoritmen i specifikationen.

Alla tre egenskaperna kan skrivas i förkortad form med hjälp av uttrycket böja. Det här ser ut så här:
böja: ;
Och vi kan också skriva två mer förkortade versioner, flex:auto; Och flex: ingen;, som betyder flex: 1 1 auto; Och flex: 0 0 auto; respektive.

Den sista egenskapen hos flexibla element kvarstår anpassa sig. Allt är enkelt här, det är samma sak som align-objekt för en behållare, vilket gör att du kan åsidosätta justeringen för ett specifikt element.

Det är det, jag är trött på det! Ge exempel!

Vi red ut den tekniska delen, den visade sig vara ganska lång, men du måste komma in i det. Nu kan vi gå vidare till praktisk tillämpning.
Under utvecklingen av dessa "fem riktigt användbara responsiva layoutmallar" var vi tvungna att lösa typiska situationer som utvecklare stöter på ganska ofta. Med flexbox blir det enklare och mer flexibelt att implementera dessa lösningar.
Låt oss ta samma 4:e layout, eftersom... den har de mest intressanta elementen.

Låt oss först ange huvudbredden på sidan, rikta in den mot mitten och trycka på sidfoten längst ner på sidan. Som alltid i allmänhet.

Html ( bakgrund: #ccc; min-höjd: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: kolumn; ) body (marginal: 0; utfyllnad: 0 15px ; display: -webkit-flex; display: flex; flex-riktning: kolumn; flex: auto; ) .header ( bredd: 100%; max-bredd: 960 px; min-bredd: 430 px; marginal: 0 auto 30 px; utfyllnad : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; box-sizing: border-box; ) .main ( bredd: 100%; max-width : 960px; min-width: 430px; marginal: auto; flex-grow: 1; box-sizing: border-box; ) .footer (bakgrund: #222; bredd: 100%; max-bredd: 960px; min-width : 430px; färg: #eee; margin: auto; stoppning: 15px; boxstorlek: border-box;)

På grund av det faktum att vi specificerade flex-grow: 1 för .main; den sträcker sig till full tillgänglig höjd och pressar därigenom sidfoten till botten. Bonusen i denna lösning är att sidfoten kan ha en icke-fixerad höjd.

Låt oss nu placera logotypen och menyn i rubriken.
.logo ( font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( innehåll: ""; display: block ; ) .logo:before ( bakgrund: #222; bredd: 50px; höjd: 50px; marginal: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( bakgrund: #222; bredd: 90px; höjd : 30px; ) .nav ( marginal: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( bakgrund: #222; bredd: 130px; höjd: 50px; font-size: 1,5rem; färg: #eee; text-decoration: none; margin: 5px 0 0 5px; display: -webkit-flex; display: flex; justify-content: center; align-items: center; )

Eftersom rubriken har flex-wrap: wrap; och motivera-innehåll: space-between; Logotypen och menyn är utspridda på olika sidor av rubriken och om det inte finns tillräckligt med utrymme för menyn flyttas den elegant under logotypen.

Därefter ser vi ett stort inlägg eller banner, det är svårt att säga vad det är specifikt, men det är inte meningen. Vi har en bild till höger och text med en titel till vänster. Jag håller personligen fast vid tanken att alla element ska vara så flexibla som möjligt, oavsett om layouten är adaptiv eller statisk. Så i det här inlägget har vi en sidofält där en bild placeras; strängt taget kan vi inte säga exakt vilken bredd vi behöver, för idag har vi en stor bild, imorgon en liten, och vi vill inte göra om elementet från grunden varje gång. Det betyder att vi behöver sidofältet för att ta den plats den behöver, och resten av utrymmet kommer att gå till innehåll. Nu gör vi det:

Box ( teckenstorlek: 1,25rem; linjehöjd: 1,5; teckensnitt: kursiv; marginal: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; ) .box-base (marginal-vänster: 50px; flex: 1 0 430px; ) .box-side (marginal-left: 50px; flex: ingen; ) .box-img (max-bredd: 100%; höjd : auto ;)

Som du kan se för .box-base, där vi har titeln och texten, angav jag basbredden med flex-bas: 430px;, och även förbjudet blockkrympning med hjälp av flex-krympa: 0;. Med denna manipulation sa vi att innehållet inte kan bli mindre än 430px brett. Och med tanke på det faktum att för .box anger jag flex-wrap: wrap; i det ögonblick som sidofältet och innehållet inte passar in i container.box, kommer sidofältet automatiskt att falla under innehållet. Och allt detta utan ansökan @media! Jag tycker att det här är väldigt coolt.

Vi har tre kolumninnehåll kvar. Det finns flera lösningar på detta problem, jag kommer att visa en av dem; i de andra layouterna finns det ett annat alternativ.
Låt oss skapa en behållare, kalla den .content och konfigurera den.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

Behållaren har tre kolumner, .banners, .posts, .comments
.banners (flex: 1 1 200px; ) .posts (marginal: 0 0 30px 30px; flex: 1 1 200px; ) .comments (marginal: 0 0 30px 30px; flex: 1 1 200px;

Jag gav kolumnerna en basbredd på 200px så att kolumnerna inte skulle smalna av för mycket, men det skulle vara bättre om de flyttades under varandra efter behov.

Enligt layouten kommer vi inte att klara oss utan @media med innehållet, så låt oss justera kolumnernas beteende för bredd lite mer<800px и <600px.
@mediaskärm och (maxbredd: 800px) (.banners (marginal-vänster: -30px; display: -webkit-flex; display: flex; flex-bas: 100%; ) .posts (marginal-left: 0; ) ) @mediaskärm och (maxbredd: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Det är allt som är magin när det gäller att skapa en layout på FlexBox. En annan uppgift som jag gillade är i den 5:e layouten, specifikt handlar det om anpassning av innehåll.

Vi ser hur på skrivbordsupplösning inläggen byggs i ett rutnät med tre i rad. När visningsportens bredd blir mindre än 800px förvandlas rutnätet till en kolumn med inlägg, där inläggsfotot växelvis är uppradat på vänster och höger sida av inläggets innehåll. Och om bredden är mindre än 600px är inläggsfotot helt dolt.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-bas: calc(33,33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap; ) .grid-img ( marginal: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen och (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-bas: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(jämn) .grid-img ( marginal: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(udda) .grid-img ( marginal: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @mediaskärm och (maxbredd: 600px) ( .grid-img (visa: ingen; ) )

I själva verket är detta bara en liten del av vad som kan implementeras med FlexBox. Specifikationen låter dig bygga mycket komplexa sidlayouter med enkel kod.

Flexbox (Flexible Box Layout Module) Specifikationär en metod för att placera element i horisontella eller vertikala riktningar.

Flexbox kombinerar en uppsättning egenskaper för en överordnad flexbehållare och för underordnade flexartiklar.

För att ett element ska bli en flexbehållare måste det tilldelas display: flex; eller display: inline-flex;(block respektive linje).

Två axlar skapas inuti flexbehållaren: den huvudsakliga och de tvärgående axlarna vinkelräta mot den. Först inriktas flexelementen längs huvudaxeln och sedan längs den tvärgående.

Flex behållarens egenskaper
flex-riktning	Definierar riktningen för huvudaxeln. Möjliga värden: rad– från vänster till höger (standard); rad-omvänd- från höger till vänster; kolumn- uppifrån och ner; kolumn-omvänd- ner upp.
flex-wrap	Avgör om behållaren är multi-line. Möjliga värden: nurap– flexelement är uppradade i en rad; om de inte passar in i behållaren går de utanför dess gränser (som standard); slå in– flexelement är uppradade i flera rader om de inte passar i en; wrap-reverse- Liknande slå in, men överföringen sker från botten till toppen.
flex-flöde	Definierar två parametrar samtidigt: flex-direction och flex-wrap. Till exempel, flex-flow: column wrap;
motivera-innehåll	Bestämmer inriktningen av element längs huvudaxeln. Möjliga värden: flex-start– flexelement pressas till början av huvudaxeln (som standard); flex-ände– flexelement pressas mot änden av huvudaxeln; Centrum– flexelementen är inriktade mot mitten av huvudaxeln; mellanslag– flexelementen är fördelade längs huvudaxeln, med det första elementet pressat till början av axeln och det sista till slutet; utrymme runt– flexelement är fördelade längs huvudaxeln, med fritt utrymme fördelat lika mellan elementen. Men det är värt att notera att utrymmena summerar och avståndet mellan elementen är dubbelt så stort som avståndet mellan kanterna på behållaren och de yttersta elementen.
align-objekt	Bestämmer inriktningen av element längs den tvärgående axeln. Möjliga värden: flex-start– flexelement pressas till början av den tvärgående axeln (som standard); flex-ände– flexelement pressas mot änden av den tvärgående axeln; Centrum– böjliga element är inriktade mot mitten av den tvärgående axeln; baslinje– flexelementen är inriktade längs sin baslinje. Baslinjen är en tänkt linje som löper längs tecknets nedre kant utan att ta hänsyn till överhäng, såsom bokstäverna "d", "r", "ts", "sch"; sträcka– flexelement sträcker sig och tar upp allt tillgängligt utrymme längs den tvärgående axeln. Men om elementen har en given höjd, då sträcka kommer att ignoreras.
anpassa-innehåll	Bestämmer tväraxelinriktningen för hela rader av flexobjekt. Möjliga värden: flex-start– rader av flexelement pressas till början av den tvärgående axeln (som standard); flex-ände– rader av flexelement pressas mot änden av den tvärgående axeln; Centrum– rader av flexibla element är i linje med mitten av den tvärgående axeln; mellanslag– rader av flexibla element är fördelade längs den tvärgående axeln, med den första raden pressad till början av axeln och den sista till slutet; utrymme runt– rader av flexelement är fördelade längs den tvärgående axeln, med fritt utrymme fördelat lika mellan raderna. Men det är värt att notera att utrymmena summerar och avståndet mellan linjerna är dubbelt så stort som avståndet mellan behållarens kanter och de yttersta linjerna. sträcka– rader av flexelement sträcks ut och tar upp allt tillgängligt utrymme längs den tvärgående axeln. Men om elementen har en given höjd, då sträcka kommer att ignoreras. Den här egenskapen fungerar inte för en flexbehållare med en rad.

Flex Element egenskaper
beställa	Bestämmer i vilken ordning ett enskilt flexelement visas i en flexbehållare. Anges som ett heltal. Standard är 0, sedan följer elementen efter varandra i en naturlig flödesordning. Menande beställa anger vikten av elementets position i sekvensen, snarare än dess absoluta position.
flex-bas	Definierar basstorleken för en flexibel artikel innan utrymme tilldelas i behållaren. Kan anges i px, %, em och andra måttenheter. I huvudsak är detta en slags utgångspunkt i förhållande till vilken elementet sträcks eller komprimeras. Standardvärde - bil, med storleken på elementet beroende på storleken på det interna innehållet.
flex-växa	Bestämmer hur mycket ledigt utrymme inuti behållaren flexobjektet kommer att lägga till sin basstorlek. Specificeras av ett heltal som fungerar som en proportion. Standard är 0. Om alla element flex-grow: 1, då blir de alla lika stora. Om du ställer in ett flexobjekt till 2 kommer det att lägga till dubbelt så mycket till sin basstorlek som de andra.
flex-krympa	Bestämmer hur mycket, om det inte finns tillräckligt med utrymme, flexelementet kommer att krympa i förhållande till minskningen av angränsande element inuti flexbehållaren. Specificeras av ett heltal som fungerar som en proportion. Standard är 1. Om ett flexelement är inställt på flex-krympning: 2, då kommer dubbelt så mycket att subtraheras från dess basstorlek som från andra om behållaren är mindre än summan av basstorlekarna för elementen den innehåller.
böja	Definierar tre parametrar samtidigt: flex-grow, flex-shrink, flex-basis. Till exempel, flex: 1 1 200px;
anpassa sig	Åsidosätter standardjusteringen eller align-objekt, för ett specifikt flexelement. Möjliga värden: flex-start– flexelementet pressas till början av den tvärgående axeln (som standard); flex-ände– flexelementet pressas mot änden av den tvärgående axeln; Centrum– det flexibla elementet är inriktat mot mitten av den tvärgående axeln; baslinje– flexelementet är inriktat mot baslinjen; sträcka– flexelementen sträcks ut och tar upp allt tillgängligt utrymme längs den tvärgående axeln. Men om höjden är given, då sträcka kommer att ignoreras.

Funktioner för att använda Flexbox i praktiken

1. Högerjustering

Med utvecklingen av internetteknologier, inklusive HTML och CSS, öppnas ständigt nya möjligheter för att skapa webbplatser för utvecklare. Ett av problemen är fortfarande förekomsten av föråldrade versioner av webbläsare. Det gäller främst Internet Explorer, speciellt för de som använder Windows XP.

En webblayoutdesigner står ofta inför uppgiften att anpassa CSS-block på en sida. Till exempel kan du ordna alla blocken efter varandra, horisontellt, placera dem i mitten eller längst ner i behållaren, etc. Med tillkomsten av parametern display - flex egenskap förenklas denna uppgift avsevärt. Denna teknik är utformad för att layouta underordnade element, det vill säga element i ett block eller en behållare. Parametrarna för denna layout är mer än tillräckligt.

Så först och främst måste du skapa en överordnad behållare. Låt oss skapa den så att en ram visas runt den för tydlighetens skull. CSS-koden för behållaren kommer att vara följande:

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:stretch;
}

Huvudegendomen är display:flex. För att underordnade element ska placeras i flera rader, lägg till egenskapen - flex-wrap: wrap.

Och bara fastigheten anpassa-innehåll anger hur css-block ska placeras och justeras. Parameter sträcka tillåter blocken att vara jämnt fördelade i behållaren. Samtidigt kan deras höjd väljas automatiskt. Vad ser det ut som? Låt oss lägga till css för interna block.

Container div (
bredd: 50px;
bakgrund:grön;
margin:5px;
}

Vi ställer inte in höjden med flit. HTML-koden ser ut så här:

Resultatet av koden visas i figuren.

Vad händer om du också anger höjden på blocken:

Container div (
bredd: 50px;
höjd: 50px;
bakgrund:grön;
margin:5px;
}

Låt oss nu ta bort höjden och göra blockens bredd lika med 100%

Container div (
bredd: 100%;
bakgrund:grön;
margin:5px;
}

Vi förstår.

En annan parameter anpassa-innehållär Centrum och låter dig rikta in alla block i mitten.

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:center;
}
.container div(
bredd: 50px;
höjd:50px;
bakgrund:grön;
margin:5px;
}

Resultat:

Annat alternativ flex-ände egenskaper anpassa-innehåll gör att du kan placera block i botten av behållaren.

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:flex-end;
}

Parameter flex-start kommer att göra allt precis tvärtom.

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:flex-start;
}

Ytterligare en egenskapsparameter anpassa-innehåll, vars resultat inte kommer att vara lätt att skapa utan att använda en flexbehållare - detta mellanslag. Egenskapen placerar den första raden överst och den andra längst ner, vilket skapar ett tomt utrymme mellan dem.

En del av CSS-koden:

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:space-between;
}

Resultat:

Fast egendom utrymme runt lägger till tomt utrymme högst upp och nere. Dessutom är var och en av dem lika med hälften av det tomma utrymmet i mitten.

Behållare (
bredd:450px;
höjd:250px;
kantlinje: 1px fast #000000;
display: flex;
flex-wrap: wrap;
align-content:space-around;
}

Alltså css-egenskapen anpassa-innehåll har många parametrar: stretch, flex-start, flex-slut, center, mellanrum-mellan, mellanrum-runt.

Som du kan se från exemplen ovan, genom att ändra en parameter i egenskapen css align-content, använder vi justeringen av css-block med flex-teknologi på helt olika sätt. Den här koden fungerar inte i Internet Explorer upp till och med version 10.

I den här artikeln kommer vi att introducera CSS Flexbox-teknik, designad för att skapa flexibla webbsideslayouter.

Syftet med CSS Flexbox

CSS Flexbox är till för skapa flexibla layouter. Med denna teknik kan du mycket enkelt och flexibelt arrangera element i en behållare, fördela det tillgängliga utrymmet mellan dem och rikta in dem på ett eller annat sätt, även om de inte har specifika dimensioner.

CSS Flexbox gör det mycket enklare att skapa responsiva designs än att använda Float och positionering.

Flexbox kan användas både för CSS-uppmärkning av en hel sida och dess enskilda block.

Webbläsarstöd för CSS Flexbox

CSS Flexbox stöds av alla moderna webbläsare som för närvarande används (med prefix: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Grunderna i CSS Flexbox

Att skapa CSS-uppmärkning med Flexbox börjar med att ställa in det önskade HTML-elementets CSS-visningsegenskap till flex eller flex-inline .

Efter detta blir detta element en flexbehållare, och allt dess direkt barnelement är flexelement. Dessutom, när vi talar om flexbox, menar vi bara ett element med display:flex eller display:flex-inline och alla element direkt ligger i den. I CSS Flexbox finns det alltså bara två typer av element: en flexbehållare och ett flexelement.

Egenskaper för prefix och maxbredd har lagts till i CSS för att stödja layout i de flesta webbläsare.

För att "förvandla" ett block till en flexbehållare, använd radklassen. Att ställa in bredden på .col__article och .col__aside flexelement inuti en flexbehållare görs med flex CSS-egenskapen.

Som ett exempel, låt oss markera en annan sidfot med flexbox och skapa ett block som består av tre element i .col__article-elementet (minsta bredd på ett element är 300px). Vi kommer att placera fyra block i sidfoten (minsta bredd på ett block är 200px).

Orderegenskapen styr i vilken ordning underordnade element visas i en flexbehållare. Som standard är de ordnade i den ordning de ursprungligen lades till i flexbehållaren.

Värderingar

.flex-item ( ordning:<целое число>; }

Flex-objekt kan ordnas om med denna enkla egenskap utan att ändra HTML-koden.

Standardvärde: 0.

flex-växa

Den här egenskapen anger en tillväxtfaktor, som bestämmer hur mycket ett flexobjekt kommer att växa i förhållande till andra flexartiklar i flexbehållaren vid tilldelning av positivt ledigt utrymme.

Värderingar

.flex-item (flex-grow:<число>; }

Om alla flexartiklar har samma flex-tillväxtvärde, kommer alla artiklar att ha samma storlek i behållaren.

Det andra flexobjektet tar upp mer plats i förhållande till storleken på de andra flexartiklarna.

Standardvärde: 0.

flex-krympa

flex-shrink anger en krympningsfaktor som bestämmer hur mycket en flexartikel kommer att krympa i förhållande till andra flexartiklar i flexbehållaren när negativt ledigt utrymme distribueras.

Värderingar

.flex-item ( flex-krympa:<число>; }

Som standard kan alla flex-objekt krympas, men om vi ställer in flex-shrink-värdet till noll (ingen krympning) så behåller objekten sin ursprungliga storlek.

Standardvärde: 1.

Negativa tal är inte tillåtna.

flex-bas

Den här egenskapen tar samma värden som egenskaperna för bredd och höjd, och anger den initiala basstorleken för flexelementet, innan det lediga utrymmet allokeras enligt förhållanden.

Värderingar

.flex-objekt (flex-bas: auto |<ширина>; }

flex-basis specificeras för den fjärde flexposten och dikterar dess initiala storlek.

Standardvärde:bil.

böja

Denna egenskap är en förkortning för egenskaperna flex-grow, flex-shrink och flex-bas. Bland andra värden kan du också ställa in auto (1 1 auto ) och ingen (0 0 auto ).

Värderingar

.flex-objekt (flex: ingen | auto | [ ? || ]; }

Standardvärde: 0 1 auto .

W3C rekommenderar att du använder egenskapen flex stenografi istället för individuella egenskaper eftersom flex korrekt återställer alla ospecificerade komponenter för typisk användning.

anpassa sig

Egenskapen align-self låter dig åsidosätta standardjusteringen (eller värdet som anges via align-items ) för enskilda flexobjekt. För att förstå de tillgängliga värdena, se beskrivningen av align-items för flexbehållaren.

Värderingar

.flex-item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

För de tredje och fjärde flexelementen har inriktningen omdefinierats via egenskapen align-self.