CSS Flex Container
Ouerelement (houer)
Soos ons in die vorige hoofstuk gespesifiseer het, is dit 'n buighouer ( die blou area) met drie buigitems :
1
2
3
Die buighouer word buigsaam deur die displayeiendom te
stel op flex:
Voorbeeld
.flex-container {
display: flex;
}
Die buigsame houer eienskappe is:
Die buigrigting Eiendom
Die flex-directioneiendom definieer in watter rigting die houer die buigsame items wil stapel.
1
2
3
Voorbeeld
Die columnwaarde stapel die buigitems vertikaal (van bo na onder):
.flex-container {
display: flex;
flex-direction: column;
}
Voorbeeld
Die column-reversewaarde stapel die buigitems vertikaal (maar van onder na bo):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Voorbeeld
Die rowwaarde stapel die buigitems horisontaal (van links na regs):
.flex-container {
display: flex;
flex-direction: row;
}
Voorbeeld
Die row-reversewaarde stapel die buigitems horisontaal (maar van regs na links):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Die flex-wrap Property
Die flex-wrapeiendom spesifiseer of die buigsame items moet toedraai of nie.
Die voorbeelde hieronder het 12 buigsame items, om die
flex-wrapeiendom beter te demonstreer.
1
2
3
4
5
6
7
8
9
10
11
12
Voorbeeld
Die wrapwaarde spesifiseer dat die buigsame items sal toedraai indien nodig:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Voorbeeld
Die nowrapwaarde spesifiseer dat die buigitems nie sal toedraai nie (dit is verstek):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Voorbeeld
Die wrap-reversewaarde spesifiseer dat die buigsame items sal toedraai indien nodig, in omgekeerde volgorde:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Die flex-flow Eiendom
Die flex-floweiendom is 'n snelskrif-eiendom vir die opstel van beide die
flex-directionen
flex-wrapeiendomme.
Voorbeeld
.flex-container {
display: flex;
flex-flow: row wrap;
}
Die regverdig-inhoud Eiendom
Die justify-contenteiendom word gebruik om die buigitems in lyn te bring:
1
2
3
Voorbeeld
Die centerwaarde bring die buigitems in die middel van die houer in lyn:
.flex-container {
display: flex;
justify-content: center;
}
Voorbeeld
Die flex-startwaarde belyn die buigitems aan die begin van die houer (dit is verstek):
.flex-container {
display: flex;
justify-content: flex-start;
}
Voorbeeld
Die flex-endwaarde bring die buigitems aan die einde van die houer in lyn:
.flex-container {
display: flex;
justify-content: flex-end;
}
Voorbeeld
Die space-aroundwaarde vertoon die buigitems met spasie voor, tussen en na die lyne:
.flex-container {
display: flex;
justify-content: space-around;
}
Voorbeeld
Die space-betweenwaarde vertoon die buigitems met spasie tussen die lyne:
.flex-container {
display: flex;
justify-content: space-between;
}
Die belyn-items Eiendom
Die align-itemseiendom word gebruik om die buigitems in lyn te bring.
1
2
3
In hierdie voorbeelde gebruik ons 'n 200 pixels hoë houer, om die
align-itemseienskap beter te demonstreer.
Voorbeeld
Die centerwaarde bring die buigitems in die middel van die houer in lyn:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Voorbeeld
Die flex-startwaarde bring die buigitems aan die bokant van die houer in lyn:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Voorbeeld
Die flex-endwaarde bring die buigitems aan die onderkant van die houer in lyn:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Voorbeeld
Die stretchwaarde strek die buigitems om die houer te vul (dit is verstek):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Voorbeeld
Die baselinewaarde belyn die buigitems soos hul basislyne belyn:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Let wel: die voorbeeld gebruik verskillende lettergroottes om te demonstreer dat die items belyn word volgens die teksbasislyn:
1
2
3
Die belyn-inhoud Eiendom
Die align-contenteiendom word gebruik om die buiglyne in lyn te bring.
1
2
3
4
5
6
7
8
9
10
11
12
In hierdie voorbeelde gebruik ons 'n houer van 600 piksels hoë, met die
flex-wrapeienskap gestel op wrap, om die eienskap beter te demonstreer align-content.
Voorbeeld
Die space-betweenwaarde vertoon die buiglyne met gelyke spasie tussen hulle:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Voorbeeld
Die space-aroundwaarde vertoon die buiglyne met spasie voor, tussen en na hulle:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Voorbeeld
Die stretchwaarde strek die buiglyne om die oorblywende spasie op te neem (dit is verstek):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Voorbeeld
Die centerwaarde wat vertoon word, vertoon die buiglyne in die middel van die houer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Voorbeeld
Die flex-startwaarde vertoon die buiglyne aan die begin van die houer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Voorbeeld
Die flex-endwaarde vertoon die buiglyne aan die einde van die houer:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfekte sentrering
In die volgende voorbeeld sal ons 'n baie algemene stylprobleem oplos: perfekte sentrering.
OPLOSSING: Stel beide die justify-contenten align-itemseienskappe op
center, en die buigitem sal perfek gesentreer wees:
Voorbeeld
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Die CSS Flexbox Container Properties
Die volgende tabel lys al die CSS Flexbox Container-eienskappe:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |