Bygg en webbsida med CSS3 Flexbox

Igår diskuterade vi framtiden för CSS-layout och några av de nya modulerna som CSS3 tar med på bordet i den här arenan. En av dessa som vi kortfattat berörde var CSS3 Flexbox.

Idag kommer vi att gräva djupare in i den här modellen och bygga en fullständig webbsida med den. Det kommer inte att vara redo att genomföra på dina projekt men det ger dig ytterligare inblick i en möjlig väg att vi kommer att koda webbplatser under de närmaste åren. Dessutom är det här bara trevligt att leka med!

Högt Experimentell: Endast Webkit

Mitt mål för detta inlägg var att få en arbetssida igång på flera webbläsare, det hände inte. Vid denna tidpunkt är implementeringen buggy och inkonsekvent över webbläsare, även efter att du installerat Flexie.js, fick jag fortfarande oerhört olika resultat mellan Firefox och Safari (jag tror att det har att göra med att blanda typiska margencentrerade behållare och Flexbox).

Av detta skäl kommer dagens projekt främst att riktas till Safari och Chrome tyvärr är det fortfarande en röra i andra webbläsare! Jag uppmuntrar dig definitivt att följa med och sedan spela med den färdiga produkten för att se om du kan få igång det i en webbläsarimplementering. Om du har förslag, skulle jag gärna höra dem i kommentarerna!

Steg 1: Återanvändbara klasser

Sedan jag kortfattat förklarade det grundläggande begreppet Flexbox i gårdagens inlägg, fokuserar jag på implementering här. Men oroa dig inte, du borde få kärnan när vi går vidare.

Det första vi vill göra är att skapa några grundläggande klasser som hjälper till att definiera vår layout. Dessa attribut kan appliceras på ett ID på erforderligt sätt, men jag tycker att det är praktiskt att och städa att göra det på så sätt.

.hasflex {display: box; display: -webkit-box; display: -moz-box; } .box0 {-webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; } .box1 {-webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; } .box2 {-webkit-box-flex: 2; -moz-box-flex: 2; box-flex: 2; } .box3 {-webkit-box-flex: 3; -moz-box-flex: 3; box-flex: 3; } .last {margin-right: 0; }

Låt oss diskutera hur dessa klasser fungerar. Den första klassen, hasflex, kommer att tillämpas på en förälderbehållare vars barn vi vill lägga ut med hjälp av det här nya Flexbox-systemet. En sak som du kommer att märka är att hela denna design kommer att vara helt utan floats så att du får några bra indikationer på var vi ska implementera Flexbox i vår kod.

Därefter inrättade vi några fler klasser för att tillämpa olika box-flex värden. Flexbox ska enkelt fördela våra barnelement över behållaren och dessa kommer att definiera proportionerna. jag tro att standardvärdet är? 0? men resultaten verkade lite buggy med detta antagande så jag tyckte det var bra att alltid bara ange ett värde manuellt.

Steg 2: Initial HTML & CSS

För att starta ditt HTML-dokument, skapa en behållare och en rubrik. Vid det här laget är dessa grundläggande element som vi kommer att bygga precis som alltid utan hjälp av Flexbox.

<h1>Design Shack Flexbox Demo</h1>

När du har fått det på plats, släng in de grundläggande stilarna nedan. I grund och botten ställer jag upp en mörk kropp med en ljus 1000 px bred behållare som håller hela vårt innehåll. Kasta i några marginaler till centrum och några grundläggande textstilar och vi är redo att gå vidare till de roliga grejerna.

Notera: Skriftrubriken jag ska använda är Oswald, från Google Fonts.

/ * Basic Reset * / * {vaddering: 0; marginal: 0; } / * Kropp / Container * / kropp {font-family: helvetica, arial, sans-serif; typsnittstorlek: 15px; linjehöjd: 23px; bakgrund: # 111; färg: # 222; } #container {width: 1000px; marginal: 0 auto; bakgrund: #eee; minhöjd: 1150px; } / * Header * / #header {margin: 0 auto; bredd: 900px; padding-top: 20px; font-family: "Oswald", arial, serif; }

Steg 3: Navigering

Nu för navigationsområdet skapar du vanligtvis en lista med länkar och flyter dem sedan till vänster. Med Flexbox är processen lite annorlunda. Här tillämpar vi helt enkelt hasflex klass som vi skapade tidigare och sedan använda box0 för var och en av listobjekten. tillämpa box0 till alla tre har effekten att flytta länkarna till vänster men kommer inte att distribuera dem hela vägen över behållarens bredd.

<ul> <li>Hem</li> <li>Handla om</li> <li>Kontakta</li> </ul>

Därefter tillämpar vi helt enkelt samma typer av stilar som vi skulle på någon annan webbsida. Huvudmålet här är att placera länkarna lite ut med vissa marginaler och för att se till att våra länkar är ordentligt stylade.

/ * Navigering * / #nav {bredd: 900px; / * bakgrund: #eee; * / marginal: 0 auto; } #nav ul {listestil: none; } #nav ul li {margin: 20px 20px 0 0px; } #nav en {text-decoration: none; färg: # 111; } #nav a: svävar {text-decoration: underline; färg: # 666; }

Steg 4: Bilden

Varje bra webbsida behöver en bild. För att ytterligare illustrera hur du selektivt tillämpar Flexbox bara på de element som behöver det, slänger vi in ​​en stor headerbild med samma exakta kod som du vanligtvis skulle.

<img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-web-page-with-css3-flexbox_4.jpg"> <p>Det här är där Flexbox verkligen lyser. Normalt skapar en tre kolumnlayout som den som visas ovan innebära en bra mängd matematisk planering. Vi behöver inte bara dela förälderbehållaren i tre men också räkna ut rätt proportioner så att mellanspalten är bredare än de andra två.</p> <p>Men med Flexbox är allt vi behöver göra att tillämpa vår <em>Flexbox</em> klass i samband med numrerade rutklasser. Här ställer jag mitt div till <em>box2</em> och de andra till <em>box3</em>. Som du kan se i bilden ovan är effekten av detta en automatisk fördelning av kolumnerna medan den andra är bredare än den första.</p> <p>Intressant nog, ledde allt jag läste mig att tro att <em>box2</em> klassen skulle vara den smalaste i det här fallet, men det var helt enkelt inte fallet i min levande test! Denna inställning ger en smal första och sista punkt och en bred andra stycke.</p> <textarea wrap="soft" readonly=""> <h2>Ett</h2> <p>Vad är det med dig? </p> <h2>Long Two</h2> <p>Vad är det med dig? </p> <h2>Tre</h2> <p>Vad är det med dig? </p>

Kombinera detta med några grundläggande CSS och du har en snabb och enkel tre kolumnlayout! Eftersom Flexbox automatiskt tar hand om fördelningen i förhållande till moderbredd, kommer eventuella förändringar som vi gör till föräldern automatiskt att reflekteras hos barnen.

/ * Textkolumner: 3 Wide * / #columns {width: 900px; / * bakgrund: grå; * / marginal: 10px auto; } #columns p {margin: 0 15px 0 0px; } #columns h2 {margin: 0 30px 0 0px; linjehöjd: 35px; font-family: "Oswald", arial, serif; }

En fascinerande sak om Flexbox är att vi faktiskt kunde omordna de kolumner som vi installerar med ren CSS. tilldela -webkit-box-ordinal-gruppen: (ett tal); till varje element ger dig kontroll över deras utseende.

Steg 6: Vertikal Stack

Det är viktigt att lära dig att du inte behöver använda vertikala kolumner när du arbetar med Flexbox. Vi kan använda samma teknik som ovan för att stapla några stycken ovanpå varandra. Om du verkligen kommer in i Flexbox kan den här tekniken användas för att blanda vertikala och horisontellt staplade element, men vi kommer att hålla det grundläggande här bara för att se hur det fungerar.

<h2>Long Two</h2> <p>Vad är det med dig? </p> <p>Vad är det med dig? </p> <p>Vad är det med dig? </p>

Den primära skillnaden här är vad vi har satt box-orient till vertikal, vilket ger oss den vertikala stapeln som visas i bilden ovan istället för de kolumner som vi skapade i föregående steg.

/ * Textrader * / #rows {width: 900px; / * bakgrund: grå; * / marginal: 30px auto 15px; -webkit-box-orientering: vertikal; -moz-box-orientering: vertikal; box-orientering: vertikal; } #rows p {margin: 0 0px 15px 0px; } #rows h2 {linjehöjd: 35px; font-family: "Oswald", arial, serif; }

Steg 7: Två kolumner

Bara för att byta upp en sista gång, låt oss skapa en annan sektion, den här gången med två kolumner istället för tre. Principen är exakt densamma. Du behöver inte ompröva layouten eftersom du har två kolumner den här gången, Flexbox tar hand om all tung lyft igen.

<h2>Ett</h2> <p>Vad är det med dig? </p> <h2>Två</h2> <p>Vad är det med dig? </p> / * twoColums * / #twoColums {width: 900px; marginal: 0px auto; } #twoColums p {margin: 0 20px 0 0; } #twoColums h2 {linjehöjd: 35px; font-family: "Oswald", arial, serif; }

Färdig produkt

Kolla in en levande demo om du är i Safari eller Chrome.

Går längre

Jag försökte försiktigt hålla detta exempel så enkelt som möjligt. Du kan dock ganska enkelt ta den här layouten och göra den ännu mer komplex. Till att börja med kommer användandet av procentandelar för bredd att ge dig en fin, väldigt flexibel layout. Också, som jag nämnde ovan, kan du utföra komplexa åtgärder som omarrangemang av kolumner och blandning av vertikala och horisontella staplar i samma rad. Jag uppmanar dig att spela med koden så mycket som möjligt med hjälp av den här sidan som en guide.

Slutsats

Det här grundläggande exemplet är att skingra vidare hur vi kan använda Flexbox för att skapa både enkla och komplexa layouter någon gång i framtiden. Jag är ganska ny på modulen så det här är långt från perfekt, vilket framgår av det faktum att det inte är kompatibelt med webbläsaren ännu!

Trots dess fallfall bör du ha en stark förståelse för hur modulen fungerar och vad som kan göras med en relativt liten mängd kod när man använder Flexbox. Känn dig fri att kasta i massor av förslag i kommentarerna!