Allt om flexboxegenskaperna

Konceptet bakom Flexbox-egenskaper är att ge behållaren en möjlighet att automatiskt ändra bredden, höjden och ordningen på sina föremål för att bäst fylla ut tillgängligt utrymme. Detta kan vara riktigt användbart för att rymma objekt inom olika skärmstorlekar och enheter. Objekt utvidgas för att fylla på fritt utrymme eller krympa för att undvika ett överflöd.

CSS Flexbox-rutnät för nybörjare

CSS är en av de första och lättaste sakerna att lära sig inom webbutveckling och design, men missa inte dess enkelhet på grund av brist på funktioner. Det har ett antal fantastiska funktioner och funktioner som är redo att utnyttjas, en av dem är dess relativt nya layoutmodul: Flexbox-egenskaper.

Flexbox-egenskaper är en av de nyare layouterna som finns tillgängliga för CSS3, och det finns mycket att lära sig om det. Här får vi praktiskt med layouten och hur du använder den. Innan vi börjar, här är dock lite bakgrund om Flexbox-egenskaper:

Vad är layoutlägen?

På de enklaste termerna är CSS Flexbox-rutnätet ett layoutläge. CSS har ett antal befintliga layoutlägen. Blocklayout-läget (som display: block) har funnits länge. Blocklayouter är ett bra val att utforma fullständiga dokument. Faktum är att en webbläsare behandlar flera element som divs och stycken som blocknivå som standard.

Ett annat vanligt layoutläge är inline. Den starka taggen, inmatningstaggen och ankartaggen är exempel på inline-nivåelement. Google Chrome: s utvecklarverktyg tillåter dig även att visa ett elements "beräknad stil" för att bestämma CSS-egenskaper och värden som har använts för de element som inte uttryckligen ställts in av utvecklaren.

Den relativt nyare Flexbox-egenskaperna (Flexibel låda) har utformats som en mer effektiv metod för att lägga ut, justera och fördela utrymme mellan containerföremål, även om storleken på dessa objekt är dynamisk eller okänd. Därför termen "flexibel".

Flexbox Properties-konceptet

Det viktigaste med Flexbox-egenskaper är att det är riktningsagnostiskt. Medan blocklayouten är vertikalbaserad och inlinelayouten är horisontell baserad är Flexbox varken. Block och inline fungerar bra i rätt situationer, men saknar flexibilitet för att stödja komplicerade eller stora applikationer, särskilt när det gäller att ändra orientering, sträcka, krympa, ändra storlek och på annat sätt ändra dimensionerna på elementen.

Var används Flexbox-egenskaper?

Som alla andra CSS-layout används Flexbox bäst i vissa situationer. I synnerhet är det lämpligt för småskaliga layouter och komponenter i en applikation. För layouter i större skala skulle en rutnätlayout vara det klokare valet.

Varför föredrar Flexbox?

Många utvecklare och designers föredrar Flexbox-egenskaper när de kan (ibland för ofta!). Detta beror på att Flexbox-egenskaper är lättare att använda; elementenas placering är mycket enklare, så du kan få mer komplexa layouter med mindre kodning. Med andra ord gör det utvecklingsprocessen enklare.

En guide till Flexbox-egenskaper

Nu när du vet lite om Flexbox-egenskaper och hur och varför det fungerar, här är en detaljerad guide till layouten. Layoutens modell består av en föräldracontainer, även kallad flex flex. De omedelbara barnen från denna behållare kallas "flexartiklar".

Layouten har genomgått flera iterationer och syntaxförändringar under åren sedan dess första utkast skapades 2009. Den senaste Flexbox-specifikationen stöds på följande webbläsare:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Terminologin som används i Flexbox-egenskaper

Här är en titt på några grundläggande terminologier som används i Flexbox-egenskaperna:

  • Display: Detta kommando används för att definiera flexbehållaren. Det kan vara inline eller blockera, beroende på Det definierar också flexinnehållet för alla artiklarna i behållaren. Exempel:

.behållare (

display: flex; / * eller inline-flex * /

)

  • Order: Flex-artiklar läggs ut enligt källordern som standard, men "order" -egenskapen kan styra ordningen i vilka artiklarna visas i behållaren. Exempel:

.Artikel (

beställa: ;

)

  • Flexriktning: Denna ordning sätter upp huvudaxeln och definierar riktningen som flexföremål placeras i behållaren. Flexföremål kan primärt läggas ut i vertikala eller horisontella riktningar. Exempel:

.behållare (

flexriktning: rad | rad-omvänd | kolumn | kolumn-omvänd;

)

  • Flex-Grow: Denna ordning definierar flex-förmågan att automatiskt skala upp om den har utrymme. Den kan acceptera ett enhetslöst värde för att tjäna som en proportion. Detta värde dikterar hur mycket utrymme objektet ska ta upp i flexbehållaren. Till exempel, om alla föremål har flex-Grow-inställt som 1, kommer det återstående utrymmet i behållaren att fördelas lika till alla barn. Om värdet är 2 tar det återstående utrymmet två gånger så mycket utrymme som resten. Exempel:

.Artikel (

flex-grow:; / * standard 0 * /

)

  • Flex-krympa: Detta gör precis motsatsen som flex-grow, genom att det krymper flex-artiklarna vid behov. Exempel:

.Artikel (

flex-krympa:; / * standard 1 * /

)

  • Flexbasis: Den här beställningen definierar en standardstorlek för element innan resten av utrymmet distribueras. Det kan vara en längd, som 5rem eller 20%, eller ett nyckelord. Nyckelordet "auto" indikerar att artikelns bredd och höjd mäts, och nyckelordet "innehåll" indikerar att objektet har storlek baserat på dess innehåll. Exempel:

.Artikel (

flex-basis: | bil; / * standard auto * /

)

  • Flex: Detta är en kombinerad kortfattning för alla ovanstående tre egenskaper: flex-grow, flex-basis och flex-krymp. Standard är '0 1 auto'.

.Artikel (

flex: ingen | (||)

)

  • Motivera-innehåll: Denna ordning definierar huvudaxelns inriktning och hjälper till att fördela det extra lediga utrymmet om det finns kvar kvar när objekten är oflexibla eller har nått sin maximala storlek. Detta hjälper också till att kontrollera inriktningen av objektet när det är ett överflöde.

.behållare (

justify-content: flex-start | flex slut | centrum | mellanrum | space-runt;

)

  • Align-items: Detta används för att definiera standardbeteendet för layouten för flex-objekt på den aktuella radens tväraxel. Det är i huvudsak en version av "rättfärdiga innehåll" på tväraxeln, som är vinkelrätt mot huvudaxeln. Exempel:

.behållare (

align-items: flex-start | flex-end | centrum | baslinje | sträcka;

)

  • Justera innehåll: Denna ordning justerar behållarens linjer om det finns ytterligare utrymme på tväraxeln. Det liknar 'rättfärdig-innehåll', men för tväraxeln istället för huvudaxeln. Om det bara finns en rad flexföremål har den här egenskapen ingen effekt. Exempel:

.behållare (

align-content: flex-start | flex-end | centrum | mellanrum | space-around | sträcka;

)

Använda Flexbox-egenskaper

För att använda Flexbox-layouten kan du helt enkelt ställa in visningsegenskapen på HTML-överordnade elementet, som nedan:

.flex-container (

display: -webkit-flex; / * Safari * /

display: flex;

)

Om du föredrar att visa som ett inlineelement, kan du skriva in:

.flex-container (

display: -webkit-inline-flex; / * Safari * /

display: inline-flex;

)

Du kräver endast att den här egenskapen ska ställas in på moder flex-behållaren och dess omedelbara flex-artiklar. Containerbarnen blir automatiskt flexibla föremål.

Rekommenderade kurser

  • Online-kurs om gratis jQuery
  • Online-kurs på gratis vinkel JS
  • Online-utbildning på Mudbox
  • Certifieringsträning i gratis rubin

Flexbox Properties - Flex containeregenskaper

Det finns många sätt att gruppera Flexbox-egenskaper, och det enklaste sättet att lära sig om dem är genom att dela in dem i Flex-behållare och objektegenskaper. Vi har precis täckt några av flexcontaineregenskaperna ovan. Låt oss titta på resten:

  • Flexriktning: rad eller kolumn

Egenskapen med flexriktning kan läggas ut som kolumner vertikalt eller rader horisontellt. Med radriktningen staplas flexelementen från vänster till höger som standard. Rad-back ändrar denna riktning till höger till vänster. Kolumnriktningen är topp-till-botten som standard och kolumn-back-funktionen vänder detta till en botten-till-topp-riktning.

  • Flex-wrap: nu eller inpacka

Flex-wrap-egenskapen styr om flex-behållarens barn är utlagda i flera eller enstaka linjer och i vilken riktning de nya linjerna staplas. Nowrap-värdet ser flexposter som visas i en enda rad, krympt för att passa behållarens bredd som standard. Wrap-värdet ser flexibla objekt som visas i olika rader i vänster till höger eller från topp till botten. Du kan lägga till wrap-reverse för att ändra ordningen också. Standardvärdet är nu.

  • Flex-flöde

Den här egenskapen är i grund och botten en sammansättning av flexningsriktningen och flex-wrap-egenskaperna. Standardvärdet är 'rad nowrap'. Exempel:

.flex-container (

flex-flow: ||

)

  • Motivera-innehåll

Egenskapen justify-innehåll har fyra värden: flex-start för att anpassa objekt till behållarens vänstra sida; flex-end för att anpassa objekt till höger sida; centrum för att anpassa sig till centrum; mellanrum för att justera objekt med lika avstånd mellan dem, med de första och sista artiklarna i linje med behållarens kanter; och utrymme-för att justera flex-objektet med lika avstånd runt dem, inklusive de första och sista artiklarna. Flex-start är standardvärdet.

  • ALIGN-objekt

Den här egenskapen har fem värden: sträcka för att skala upp flexföremål för att fylla hela bredden eller höjden från korsstart till tväränden av behållaren; flex-start för att stapla föremål vid korsstarten; flex-end för att stapla föremål i tväränden; mitt för att anpassa objekt efter centrum av tväraxeln; och baslinjen för att anpassa objekt så att deras baslinjer anpassas. Stretch är standardvärdet.

  • Align-innehåll

Den här egenskapen justerar linjerna i en flexbehållare när det finns ytterligare utrymme i tväraxeln. Dess värden är: stretch för att fördela utrymme efter varje rad; flex-start för att stapla föremål mot korsstart; flex-end för att stapla objekt mot cross-enden; centrum för att stapla föremål i mitten av tväraxeln; utrymme runt för att lika fördela utrymme runt flexföremål. Standardvärdet är stretch.

Flexbox-egenskaper - Flex-objektegenskaper

Nu när du vet om Flexbox-behållaregenskaper, låt oss titta på artikelegenskaperna:

  • Beställa

Den här egenskapen kontrollerar utseendet på flexcontainerns barn. De beställs som standard inom flexcontainern.

.flex-artikel (

beställa: ;

)

Du kan ordna flex-objekt utan att behöva omstrukturera HTML-koden. Standardvärdet är noll.

  • Align-själv

Den här egenskapen gör det möjligt att åsidosätta standardinställningen för ett specifikt flexobjekt. Du kan använda värdena från align-objekt för den här egenskapen.

.flex-artikel (

align-self: auto | flex-start | flex-end | centrum | baslinje | sträcka;

)

Det automatiska värdet i align-self beräknas av värdet på align-objekt på elementets överordnade. Om elementet inte har någon förälder används sträckan istället.

Grundläggande exempel

Det är allt du behöver veta för att använda CSS Flexbox rutnätlayout. Nu är det dags att öva på det du lärde dig. Här är några exempel som visar hur alla dessa egenskaper samlas. Låt oss börja med något helt enkelt:

.parent (

display: flex;

höjd: 300px;

)

.barn (

bredd: 100px;

höjd: 100px;

marginal: auto;

)

Detta är ett exempel på perfekt centrering. Höjd- och breddvärdena kan ändras efter önskemål. Nyckeln här är att ställa in marginalen på 'auto' så att flexbehållaren automatiskt tar upp allt extra utrymme. Enkelt nog!

Låt oss nu gå vidare till att lägga till några fler egenskaper: en lista med sex objekt med fasta dimensioner som kan anpassas automatiskt. De måste fördelas jämnt till den horisontella axeln.

.flex-container (

display: flex;

justify-content: space-around;

)

Låt oss därefter försöka centrera en högerjusterad navigering för medelstora skärmar och göra den ensidig på små enheter.

/ * Stor * /

.navigation (

display: flex;

flex-flow: radbrytning;

justify-content: flex-end;

)

/ * Medium skärmar * /

@media all och (max-bredd: 800px) (

.navigation (

justify-content: space-around;

)

)

/ * Små skärmar * /

@media all och (maxbredd: 500 px) (

.navigation (

flex-riktning: kolumn;

)

)

Dags att ta detta ett steg längre! Låt oss prova en mobil-första layout med tre kolumner, med en bredd i sidled och sidhuvud och oberoende av källordning.

.wrapper (

display: flex;

flex-flow: radbrytning;

)

/ * Vi berättar att alla artiklar ska vara 100% bredd * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Vi förlitar oss på källbeställning för mobil-första strategi * /

/ * Medium skärmar * /

@media all och (min. bredd: 600 px) (

.aside (flex: 1 auto; )

)

/ * Stora skärmar * /

@media all och (min. bredd: 800 px) (

.main (flex: 2 0px; )

.aside-1 (order: 1; )

.main (order: 2; )

.aside-2 (order: 3; )

.footer (order: 4; )

)

Slutsats

Det här är bara några grundläggande exempel. Du kan spela mycket mer med CSS Flexbox-rutnätlayouter, och de är absolut ovärderliga om du vill skapa en lyhörd webbsida.

Rekommenderade artiklar

Så här är några artiklar som hjälper till att få mer detaljerad information om flexboxegenskaperna, flexboxkoden och även om css flexbox-rutnätet så att bara gå igenom länken som ges ges nedan.

  1. HTML vs XML - Toppskillnader
  2. CSS3 vs CSS - Hur skiljer de sig? (Infograph)
  3. HTML vs CSS Toppskillnader
  4. HTML5 vs Flash

Kategori:

Verktyg för webbutveckling