Hur man använder Flex för att göra din webbplats mer responsiv

Moderna webbdesigner måste vara lyhörda för ändringar i innehåll eller webbläsarstorlek. Du kan uppnå detta med vanilla CSS, media queries eller flexbox.

Vissa flexegenskaper som flex-wrap eller flex-grow kan ändra storleken eller placeringen av ett element på ett visuellt tilltalande sätt. Den här artikeln kommer att gå igenom exempel på hur du kan använda egenskaperna flex-grow, flex-shrink, flex-wrap, flex-flow och order flex.

Hur man ställer in CSS Flex Display

Om du inte är bekant med grunderna i flexbox, du kan utforska detta CodePen-kodavsnitt. Den innehåller exempelkod för en enkel flexbox-inställning. Först måste du slå in de underordnade föremålen under en förälder-div eller "flexbehållare".

<div klass="förälder">
<div klass="barn-objekt"></div>
<div klass="barn-objekt"></div>
<div klass="barn-objekt"></div>
</div>

Lägg till display: flex egendom till förälder div.

.förälder {
 display: flex;
}

Hur man odlar föremål i en behållare

De flex-växa egenskapen låter de underordnade objekten expandera för att fylla det tillgängliga utrymmet i dess överordnade div. Med den här egenskapen kan du ange "förhållandet" av utrymme som varje boxobjekt kan ta upp.

För att lägga till flex-grow, lägg till flex-grow CSS-egenskapen till vart och ett av de underordnade objekten.

<div klass="förälder">
<div stil="bakgrundsfärg: röd; flex-grow: 1"></div>
<div stil="bakgrundsfärg: orange; flex-grow: 1"></div>
<div stil="bakgrundsfärg: gul; flex-grow: 1"></div>
<div stil="bakgrundsfärg: grön; flex-tillväxt: 3"></div>
<div stil="bakgrundsfärg: blå; flex-grow: 1"></div>
</div>

.förälder {
 bredd: 500px;
 display: flex; 
}

En flex-tillväxt på 0 för varje objekt innebär att rutorna inte kommer att expandera för att fylla utrymmet för deras förälder. 0 är standardvärdet för den här egenskapen.

En flex-tillväxt på 1 för varje föremål kommer att tvinga alla lådor att expandera lika för att passa det tillgängliga utrymmet inuti föräldern.

Om en av föremålen hade en större flexibilitet, till exempel:

<div stil="bakgrundsfärg: grön; flex-tillväxt: 3"></div>

Den gröna rutan kommer att försöka få upp till tre gånger så mycket utrymme som de andra rutorna.

Se koden för flex-grow-egendomen i denna CodePen-kodavsnitt för att se ett fungerande exempel.

Hur man krymper föremål i en behållare

I vissa fall kan förälderns bredd krympa och föremålen inuti föräldern kommer inte längre att passa in. Du kan använda flex-krympa egenskap för att krympa storleken på lådorna. På så sätt kan de hållas inne i föräldern.

Flex-shrink låter dig ange ett förhållande för hur mycket varje artikel ska krympa.

Lägg till egenskapen flex-shrink till underordnade div-objekt. Ändra bredden på föräldern och barnen så att föremålen inte får plats i behållaren.

<div klass="förälder">
<div stil="bakgrundsfärg: röd; flex-krymp: 1"></div>
<div stil="bakgrundsfärg: orange; flex-krymp: 1"></div>
<div stil="bakgrundsfärg: gul; flex-krymp: 1"></div>
<div stil="bakgrundsfärg: grön; flex-krympning: 2"></div>
<div stil="bakgrundsfärg: blå; flex-krymp: 1"></div>
</div>

.förälder {
 bredd: 500px;
 display: flex; 
}
.förälder div {
 bredd: 150px;
 höjd: 150px;
}

En flex-krympning på 1 för alla artiklar innebär att alla artiklar kommer att krympa lika mycket om förälderns bredd minskas.

Om en av föremålen hade en större flex-shrink, till exempel:

<div stil="bakgrundsfärg: grön; flex-krympning: 2"></div>

Den gröna rutan kommer att försöka krympa dubbelt så mycket som de andra rutorna.

Se koden för flex-shrink-egenskapen i denna CodePen-kodavsnitt för att se ett fungerande exempel.

Hur man skjuter föremål till nästa rad

De flex-wrap egenskapen låter dig flytta objekt till nästa rad om de inte passar inom bredden på den överordnade behållaren. Här krymper inte föremålen, och du kommer att kunna bevara föremålens höjd och bredd.

Alternativen för flex-wrap-egenskapen inkluderar:

flex-wrap: nowrap | linda | wrap-reverse

Lägg till egenskapen flex-wrap till den överordnade flex-behållaren. Se till att behållarens bredd är tillräckligt liten, så att den inte passar barnföremålen inuti den. Detta kommer att tvinga alla överfulla föremål till en ny rad.

<div klass="förälder">
<div klass="röd"></div>
<div klass="orange"></div>
<div klass="gul"></div>
<div klass="grön"></div>
<div klass="blå"></div>
</div>

.förälder {
 bredd: 300px;
 kant: 1px helt svart;
 display: flex;
 flex-wrap: wrap;
}
.förälder div {
 bredd: 100px;
 höjd: 100px;
}

Wrap-värdet kommer att placera föremålen med början i det övre högra hörnet av behållaren. Wrap-reverse-värdet kommer att flytta objekten så att de börjar längst ner till höger i behållaren. När du slår in föremålen kommer den att skjuta föremål på en ny rad ovanför istället för under.

Om du anger en höjd på den överordnade behållaren kommer behållaren att lägga till avstånd mellan raderna med objekt.

Om du vill ta bort detta mellanrum, men behålla höjden på den överordnade div, använd egenskapen align-content. Ange egenskapen align-content som "flex-start" i den överordnade div:

.förälder { 
 bredd: 300px; 
 höjd: 300px;
 kant: 1px helt svart; 
 display: flex;
 flex-wrap: wrap; 
 align-content: flex-Start;
}

Egenskapen align-content är en av flera kärnor flexbox-egenskaper som låter dig styra uppriktningen.

Se koden för flex-wrap-egenskapen i denna CodePen-kodavsnitt för att se några exempel.

Hur man skickar objekt till nästa kolumn

Om du använder en annan layout (som en kolumn), och du fortfarande behöver elementen att radbryta, kan du använda flex-flöde fast egendom. Denna flex-egenskap är en kombination av flex-wrap- och flex-direction-egenskaperna.

Exempel på alternativkombinationer som du kan använda för egenskapen flex-flow inkluderar:

flex-wrap: rad nurap | kolumn nurap | rad wrap | kolumnlindning | rad wrap-reverse | kolumn wrap-reverse

Den här egenskapen fungerar på samma sätt som flex-wrap-egenskapen ovan. Lägg till flex-flow till den överordnade flex-behållaren. Se till att den överordnade behållarens bredd är tillräckligt liten för att tvinga de underordnade föremålen att slå in:

.förälder {
 bredd: 300px; 
 kant: 1px helt svart; 
 display: flex; 
 flex-flow: kolonnlindning;
}
.förälder div {
 bredd: 100px;
 höjd: 100px;
}

Objekten lindas i den angivna riktningen (rad eller kolumn).

Se koden för flex-flow-egenskapen i denna CodePen-kodavsnitt för att se några exempel.

Hur man ändrar ordningen på föremål

Om du behövde ordna om objekten på sidan på grund av någon form av dynamisk data, kan du använda beställa flex egendom. Den här egenskapen låter dig ange i vilken ordning varje artikel ska visas.

Siffrorna behöver inte nödvändigtvis börja från 1. Du kan använda vilka siffror och intervall som helst, och orderegenskapen kommer att ordna HTML-elementen från lägsta till högsta.

Lägg till orderegenskapen till var och en av objekten i den överordnade flexbehållaren:

<div klass="förälder">
<div klass="röd" stil="beställning: 2"></div>
<div klass="orange" stil="beställning: 1"></div>
<div klass="gul" stil="beställning: 5"></div>
<div klass="grön" stil="ordning: 4"></div>
<div klass="blå" stil="ordning: 3"></div>
</div>

I det här fallet kommer den orange rutan att vara längst till höger, följt av de röda, blå, gröna och sedan gula rutorna.

Se koden för orderegenskapen i denna CodePen-kodavsnitt för att se några exempel.

Experimentera med fler CSS-egenskaper på din webbplats

Du kan använda dessa flexegenskaper för att göra din webbplats mer responsiv. Detta inkluderar att använda egenskaperna flex-grow, flex-shrink, flex-wrap, flex-flow och order flex.

Du kan också lära dig om fler flexegenskaper som hjälper dig att anpassa HTML-elementen på din webbplats.

Hur man använder Flex för att justera HTML-element

Läs Nästa

Om författaren