CSS Flex Items
Kinderelemente (Items)
Die direkte kinderelemente van 'n buigbare houer word outomaties buigsame (buig) items.
1
2
3
4
Die element hierbo verteenwoordig vier blou buig items binne 'n grys buig houer.
Voorbeeld
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Die flex item eienskappe is:
Die bestelling Eiendom
Die order
eiendom spesifiseer die volgorde van die buigitems.
1
2
3
4
Die eerste flex-item in die kode hoef nie as die eerste item in die uitleg te verskyn nie.
Die bestelwaarde moet 'n getal wees, verstekwaarde is 0.
Voorbeeld
Die order -eienskap kan die volgorde van die flex items verander:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
Die flex-grow Property
Die flex-grow
eiendom spesifiseer hoeveel 'n flex-item sal groei relatief tot die res van die flex-items.
1
2
3
Die waarde moet 'n getal wees, verstekwaarde is 0.
Voorbeeld
Laat die derde buig-item agt keer vinniger groei as die ander buig-items:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
Die buig-krimp Eiendom
Die flex-shrink
eiendom spesifiseer hoeveel 'n flex-item sal krimp relatief tot die res van die flex-items.
1
2
3
4
5
6
7
8
9
10
Die waarde moet 'n getal wees, verstekwaarde is 1.
Voorbeeld
Moenie dat die derde buig-item soveel krimp soos die ander buig-items nie:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
Die flex-basis Eiendom
Die flex-basis
eiendom spesifiseer die aanvanklike lengte van 'n buigitem.
1
2
3
4
Voorbeeld
Stel die aanvanklike lengte van die derde buigitem op 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
Die flex Property
Die flex
eiendom is 'n snelskrif-eiendom vir die
flex-grow
, flex-shrink
, en flex-basis
eiendomme.
Voorbeeld
Maak die derde buig-item nie groeibaar (0), nie krimpbaar (0) en met 'n aanvanklike lengte van 200 pixels:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
Die belyn-self Eiendom
Die align-self
eiendom spesifiseer die belyning vir die geselekteerde item binne die buigsame houer.
Die align-self
eiendom ignoreer die verstekbelyning wat deur die houer se align-items
eiendom gestel is.
1
2
3
4
In hierdie voorbeelde gebruik ons 'n 200 pixels hoë houer, om die
align-self
eienskap beter te demonstreer:
Voorbeeld
Belyn die derde buig-item in die middel van die houer:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
Voorbeeld
Belyn die tweede buig-item aan die bokant van die houer, en die derde buig-item aan die onderkant van die houer:
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
Die CSS Flexbox Items Eienskappe
Die volgende tabel lys al die CSS Flexbox Items-eienskappe:
Property | Description |
---|---|
align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
flex-basis | Specifies the initial length of a flex item |
flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
order | Specifies the order of the flex items inside the same container |