logo   CSS properties til Flexbox




Flexbox er den samlende betegnelse for 13 CSS-properties (1+6+6) der i responsive opbygninger anvendes til at .....


I Bootstrap 4 er der ca. 220 selektorer der indeholder flexbox-properties.


Flexbox-properties erstatter i varierende omfang parametre knyttet til: block, inline, table og oswition.


Flexbox container
xxdisplay'display: flex;' start af flexbox sekvens.
Box og alle itemsItems enkeltvis
Properties knyttet til Flexbox-containeren og alle items deri.Properties knyttet til items i containeren enkeltvis
xalign-contentVertikal distribution vxalign-selfHorisontal. placering af vertikalt itemh
xalign-itemsHorisontal. placering af vertikale itemshxxflexKort for grow, shrink og basish
xflex-flowKort for direction og wrapvhxflex-growh
xxflex-directionRække eller kolonnevhxflex-shrinkh
xflex-wrapwrapping ja / nejxflex-basis'start'-bredde på itemh
xjustify-contentHorisontal distributionhxxorderRækkefølge for visning.


x = obligatorisk. h = horisontal. v = vertikal.


For de 12 CSS properties der er knyttet til gruppen Flexbox (anvendes til opbygning strukturen i flexbox-sider) er nedenfor beskrevet ikke alene de enkelte properties, men også deres respektive values:


Udover disse properties anvendes også alle andre properties når relevant. F.eks. varianter af height og width, samt margin og padding. De to sidste skal der tages hensyn til ved den generelle beregning af størrelser hvadenten enheden er 'px' eller '%'.


En glimrende forklaring (Youtube) på de enkelte flex-properties kan ses her: x


Online 'playground' for anvendelse af CSS i relation til Flexbox: x


Flexbox container      
x
Properties / ValuesBeskrivelseAttributes / kodeeksempelLinks
displayEtablering af flexbox container.
I containeren kan der indsættes andre flexbox-properties og andre properties. Ved at anvende forskellige selektor-navne kan der således opbygges et "flexbox bibliotek".
flex | inline-flex
flex;Aktiverer flex-funktionaliteten, så den kan anvendes til opbygning af 'block'-struktur (container og items).
Arbejder altid i relation til maksimum (100%) af den vertikale plads, der er til rådighed
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
inline-flexAktiverer flex-funktionaliteten, så den kan anvendes til opbygning af 'inline-block' inde i et item (billeder, forms, tabeller etc.). Arbejder kun i relation til minimum af den vertikale plads, der er til rådighed..d-inline-flex {
display: -ms-inline-flexbox !important;
display: inline-flex !important;
}
Properties knyttet til Flexbox-container og items deri.
Properties / ValuesBeskrivelseAttributes / kodeeksempelLinks
align-contentStyring af, hvordan linier med items som en samlet blok skal vises vertikalt, når de fordeler sig over mere end en linie. Den vertikale variant af 'justity content'.align-conent: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit; x x x
stretchNår ingen 'height' angivet: Alle items i hver enkelt linie fylder hele højden fra top til næste linie / flexboxen's bund.selektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:stretch;}
centerAlle linier med items placeres med deres fælles midte placeret hen over flexboxen's midte.selektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:center;}
flex-startAlle linier med items placeres så de starter oppefra i flexboxen.selektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:flex-start;}
flex-end.Alle linier med items placeres så de starter nedefra i flexboxen.selektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:flex-end;}
space-betweenFørste og sidste linie med items placeres til kant (øverst og nederst og de mellemliggende fordeles med lige store mellemrum. Items are positioned with space between the linesselektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:space-between;}
space-aroundAlle linier med items fordeles jævnt så afstanden på oversiden af første og undersiden af sidste linie med items er det halve af afstanden mellem de enkelte linier med items. Items are positioned with space before, between, and after the linesselektor {
border: 1px solid #000000;
display: flex;
flex-flow: row wrap;
align-content:space-around;}
align-itemsStyring af, hvordan items enkeltvis skal vises vertikalt.align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit; x x x
stretchNår ingen 'height' angivet: Alle items fylder hele højden fra top til bund i aktuel flexbox.div#selektor {
display:flex;
align-items:stretch;}
centerAlle items placeres med deres midte midt i flexbox's midte.div#selektor {
display:flex;align-items:center;}
flex-startAlle items placeres så de starter oppefra i flexbox.div#selektor {
display:flex;
align-items:flex-start;}
flex-endAlle items placeres så de starter nedefra i flexboxdiv#selektor {
display:flex;
align-items:flex-end;}
baselineAlle item placeres med overkant langs flex-box'ens baseline (flex-boxen's overkant).div#selektor {
display:flex;
align-items:baseline;}
flex-flowKort version for opsætning af direction og wrap i 1 samlet deklaration.flex-flow: flex-direction + flex-wrap | initial | inherit; x x x
flex-flowKombinationer af:
row | row-reverse | column | column-reverse
og
nowrap | wrap | wrap-reverse.
display: flex;
flex-flow: row-reverse wrap;
x
flex-directionRetning, hvori items skal vises inde i aktuel flexbox.flex-direction: row | row-reverse | column | column-reverse | initial | inherit; x x x
rowStarter horisontalt fra venstre som en række inde i aktuel flexbox. Flyder nedad efterhånden som rækkerne bliver fyldt.#selektor {
display: flex;
flex-direction:row;}
row-reverseStarter horisontalt fra højre som en række inde i aktuel flexbox. Flyder nedad efterhånden som rækkerne bliver fyldt.#selektor {
display: flex;
flex-direction:row-reverse;}
columnStarter vertikalt oppefra som en række i venstre side inde i aktuel flexbox. Flyder mod højre med opfyldning oppefra efterhånden som kolonnerne bliver fyldt.#selektor {display: flex;
flex-direction:column;}
column-reverseStarter vertikalt nedefra som en række i venstre side inde i aktuel flexbox. Flyder mod højre med opfyldning nedefra efterhånden som kolonnerne bliver fyldt.#selektor {
display: flex;
flex-direction:column-reverse;}
flex-wrapHvordan items skal wrappe (fordele sig over 2 eller flere linier) i aktuel flexbox.flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit; x x x
nowrapItems forbliver på en linie indenfor aktuel flexbox uanset størrelse (bredde downscales når nødvendigt).#selektor {
width:150px;
height: 150px;
border:1px solid black;
display: flex;
flex-wrap:nowrap;}
wrapItems wrapper vandret oppefra og nedad og udvider flexbox, når de fylder for meget til at være i oprindelig flexbox.#selektor {
width:150px;
height: 150px;
border:1px solid black;
display: flex;
flex-wrap:wrap;}
wrap-reverseItems wrapper vandret nedefra og nedad og udvider flexbox, når de fylder for meget til at være i oprindelig flexbox.#selektor {
width:150px;
height: 150px;
border:1px solid black;
display: flex;
flex-wrap:wrap-reverse}
justify-contentStyring af, hvordan items skal placeres horisontalt i aktuel flexbox.(Når de ikke fylder den helt ud.). Der ændres ikke på rækkefølge. Den vertikale variant af 'align content'.justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit; x x x
flex-startItems placees fra venstre i flexboxen. Evt. overskydende plads i højre side.div#selektor {
display: flex;
justify-content:flex-start;}
flex-endItems placeres fra højre i flexboxen. Evt. overskydende plads i venstre side.div#selektor {
display: flex;
justify-content:flex-end;}
centerItems placeres midt i flexboxen. Evt. overskydende plads fordeles ligeligt mellem venstre og højre side.div#selektor {
display: flex;
justify-content:center;}
space-betweenFørste og sidste item placeres til kant (venstre og højre og de mellemliggende fordeles med lige store mellemrum.div#selektor {
display: flex;
justify-content:space-between;}
space-aroundAlle items fordeles jævnt så afstanden på ydersiden af første og sidste item er det halve af afstanden mellem de enkelte items.div#selektor {
display: flex;
justify-content:space-around;}
Properties knyttet til items enkeltvis
align-selfStyring af vertikal visning for individuelt item.align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit; x x x
autoArver parametre fra 'parent' når findes. Ellers "stretch".div#myBlueDiv {
align-self:auto;}
stretchNår ingen 'height' angivet for item: Fylder hele højden i aktuel flex-box fra top til bund.div#myBlueDiv {
align-self:stretch;}
centerMidten på item placeres henover midten på flex-box'en. Items are positioned at the center of the containerdiv#myBlueDiv {
align-self:center;}
flex-startItem placeres lige under flex-box'ens top. Items are positioned at the beginning of the containerdiv#myBlueDiv {
align-self:flex-start;}
flex-endItem placeres ligeover flex-box'ens bund.Items are positioned at the end of the containerdiv#myBlueDiv {
align-self:flex-end;}
baselineItem placeres med overkant langs flex-box'ens baseline (flex-boxen's overkant).div#myBlueDiv {
align-self:baseline;}
flexOpbygning af bredde på item.
Propertyen er så central, at den der har givet navn til hele konceptet Flexbox.
flex: flex-grow + flex-shrink + flex-basis | auto | initial | none | inherit; x x x
flexKort version for opsætning af grow, shrink og basis i 1 samlet deklaration.
flex: 1 0 0px;En eller flere lige brede kolonner
flex: 1; 'flex: 1 0 0px;' kan forkortes til
flex: 2;Shortcut for 'flex-grow' dobblet størrelse
flex: 0 1 200px;Fast bredde til f.eks. sidebar
flex: 0 1 100%;Bredde i procent indenfor den responsive plads, der er til rådighed (efter margin og padding).
flex: 0 1 16.7%;Bredde i % item må optage ud af den responsive rådighedsplads.
flex: 1 1 auto;!!!!!
flex: auto;Samme som 1 1 auto.
flex: 0 0 auto;Forbliver altid statisk samme størrelse
flex: none;Samme som 0 0 auto
autoSame as 1 1 auto.
noneSame as 0 0 auto.
flex-growStyrer om feltet under responsivitet kan blive bredere end default, og da indtil hvor mange gange hvis der er overskydende plads indenfor boxens ramme. (Default = 0).
Fastsættes ved at 'prøve-sig-frem under responsering'.
0 Bliver ikke større,
1 'Følger med' øvrige felter.
2 Forøges op til dobbelt så meget som andre felter etc.
flex-grow: number | initial | inherit; x x x
numberHelltal for hvor mange gange større feltet må blive. Default 0div#myBlueDiv {
flex-grow:5;}
flex-shrinkStyrer om feltet under responsivitet kan blive smallere end default og da indtil hvor mange gange hvis der er manglende plads indenfor boxens ramme.(Default = 0)./>Fastsættes ved at 'prøve-sig-frem under responsering'.>0 Bliver ikke mindre.
1'Følger med' øvrige felter.
2 Forøges op til dobbelt så meget som andre felter etc.
flex-shrink: number | initial | inherit; x x x
numberHelltal for hvor mange gange mindre feltet må blive. Default 1.div#myBlueDiv {
flex-shrink:1;}
flex-basisBredde / højde på item i flex-retningen.flex-basis: number | auto | initial | inherit; x x x
numberBasisbredde på feltet. Overstyrer evt. andre breddeangivelser. Bruges i boxens 'ubrugt-plads' beregning. Danner grundlag for grow / shrink.div#myBlueDiv {
flex-basis:10px;}
autoStørrelsen sættes automatisk som størrelsen på aktuelt item (f.eks. en knap). Er den ikke sat anvendes det responsive råderum.div#myBlueDiv{
flex-basis:auto;}
orderStyring af rækkefølgen for visning af items på skærm og print.order: number | initial | inherit; x x x
numberStyring i CSS af heltal for det nummer i rækkefølgen for visning det pågældende item skal have. Default er 0. Der kan bruges negative tal. Der er ingen kontrol med 'dobblete' order / huller i rækkefølgen.div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}




























































x
x