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
	x	display	'display: flex;' start af flexbox sekvens.
Box og alle items					Items enkeltvis
Properties knyttet til Flexbox-containeren og alle items deri.					Properties knyttet til items i containeren enkeltvis
		align-content	Vertikal distribution	v			align-self	Horisontal. placering af vertikalt item	h
		align-items	Horisontal. placering af vertikale items	h		x	flex	Kort for grow, shrink og basis	h
		flex-flow	Kort for direction og wrap	vh			flex-grow		h
	x	flex-direction	Række eller kolonne	vh			flex-shrink		h
		flex-wrap	wrapping ja / nej				flex-basis	'start'-bredde på item	h
		justify-content	Horisontal distribution	h		x	order	Ræ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:

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

Flexbox container

Properties / Values Beskrivelse Attributes / kodeeksempel Links

display Etablering 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-flex Aktiverer 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 / Values Beskrivelse Attributes / kodeeksempel Links

stretch Nå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;}

center Alle 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-start Alle 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-between Fø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 lines selektor { border: 1px solid #000000; display: flex; flex-flow: row wrap; align-content:space-between;}

space-around Alle 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 lines selektor { border: 1px solid #000000; display: flex; flex-flow: row wrap; align-content:space-around;}

stretch Når ingen 'height' angivet: Alle items fylder hele højden fra top til bund i aktuel flexbox. div#selektor { display:flex; align-items:stretch;}

center Alle items placeres med deres midte midt i flexbox's midte. div#selektor { display:flex;align-items:center;}

flex-start Alle items placeres så de starter oppefra i flexbox. div#selektor { display:flex; align-items:flex-start;}

flex-end Alle items placeres så de starter nedefra i flexbox div#selektor { display:flex; align-items:flex-end;}

baseline Alle item placeres med overkant langs flex-box'ens baseline (flex-boxen's overkant). div#selektor { display:flex; align-items:baseline;}

flex-flow Kort version for opsætning af direction og wrap i 1 samlet deklaration. flex-flow: flex-direction + flex-wrap | initial | inherit;

row Starter 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-reverse Starter 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;}

column Starter 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-reverse Starter 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-wrap Hvordan items skal wrappe (fordele sig over 2 eller flere linier) i aktuel flexbox. flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

nowrap Items 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;}

wrap Items 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-reverse Items 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}

flex-start Items placees fra venstre i flexboxen. Evt. overskydende plads i højre side. div#selektor { display: flex; justify-content:flex-start;}

flex-end Items placeres fra højre i flexboxen. Evt. overskydende plads i venstre side. div#selektor { display: flex; justify-content:flex-end;}

center Items placeres midt i flexboxen. Evt. overskydende plads fordeles ligeligt mellem venstre og højre side. div#selektor { display: flex; justify-content:center;}

space-between Fø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-around Alle 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

auto Arver parametre fra 'parent' når findes. Ellers "stretch". div#myBlueDiv { align-self:auto;}

stretch Når ingen 'height' angivet for item: Fylder hele højden i aktuel flex-box fra top til bund. div#myBlueDiv { align-self:stretch;}

center Midten på item placeres henover midten på flex-box'en. Items are positioned at the center of the container div#myBlueDiv { align-self:center;}

flex-start Item placeres lige under flex-box'ens top. Items are positioned at the beginning of the container div#myBlueDiv { align-self:flex-start;}

flex-end Item placeres ligeover flex-box'ens bund.Items are positioned at the end of the container div#myBlueDiv { align-self:flex-end;}

baseline Item placeres med overkant langs flex-box'ens baseline (flex-boxen's overkant). div#myBlueDiv { align-self:baseline;}

flex Opbygning 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;

flex

Kort 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

auto Same as 1 1 auto.

none Same as 0 0 auto.

flex-grow Styrer 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;

number Helltal for hvor mange gange større feltet må blive. Default 0 div#myBlueDiv { flex-grow:5;}

flex-shrink Styrer 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;

number Helltal for hvor mange gange mindre feltet må blive. Default 1. div#myBlueDiv { flex-shrink:1;}

flex-basis Bredde / højde på item i flex-retningen. flex-basis: number | auto | initial | inherit;

number Basisbredde på feltet. Overstyrer evt. andre breddeangivelser. Bruges i boxens 'ubrugt-plads' beregning. Danner grundlag for grow / shrink. div#myBlueDiv { flex-basis:10px;}

auto Stø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;}

order Styring af rækkefølgen for visning af items på skærm og print. order: number | initial | inherit;

number Styring 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;}