Advertisement
Google Ad Slot: content-top
CSS Flex Items
Flex items in CSS are the child elements of a flex container.
order:
Specifies the order of the flex item within the container.
1
2
3
Example
<div class="flex-container">
<div class="box" style="order: 3">1</div>
<div class="box" style="order: 2">2</div>
<div class="box" style="order: 1">3</div>
</div>
flex-grow:
Specifies how much the item will grow relative to other items, based on available space in the container.The value must be a number, default value is 0.
1
2
2
3
Example
<div class="flex-container">
<div class="box" style="flex-grow: 1;">1</div>
<div class="box" style="flex-grow: 2;">2</div>
<div class="box" style="flex-grow: 2;">2</div>
<div class="box" style="flex-grow: 3;">3</div>
</div>
flex-shrink:
Specifies how much the item will shrink relative to other items if there isn’t enough space in the container.The value must be a number, default value is 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Example
<div class="flex-shirnk">
<div class="flex-container">
<div class="box" >1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box" style="flex-shrink:0">7</div>
<div class="box" style="flex-shrink:0">8</div>
<div class="box" style="flex-shrink:0">9</div>
<div class="box" style="flex-shrink:0">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
</div>
</div>
flex-basis:
Defines the initial size of the flex item before space is distributed according to flex-grow or flex-shrink.
- Accepts values like
px,%,auto, etc. - Default value:
auto(size is based on content).
1
2
3
4
5
6
Example
<div class="flex_basis">
<div class="flex-container">
<div class="box" >1</div>
<div class="box">2</div>
<div class="box" style="width: 150px;">3</div>
<div class="box" style="width: 150px;">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
</div>
flex:
A shorthand for the three properties.flex-grow,flex-shrink,flex-basis
1
2
3
5
6
Example
<div class="flex_module">
<div class="flex-container">
<div class="box" >1</div>
<div class="box" style="flex: 0 0 150px;">2</div>
<div class="box" style="flex: 1 1 100px">3</div>
<div class="box" style="flex: 2; ">5</div>
<div class="box">6</div>
</div>
</div>
align-self:
Overrides the container's align-items property for a specific item.
Syntax:
align-items : auto | flex-start | flex-end | center | baseline | stretch;
1
2
3
5
6
Example
<div class="align-self">
<div class="flex-container">
<div class="box" style="align-self: center">1</div>
<div class="box" style="align-self: flex-start">2</div>
<div class="box" style="align-self: flex-end">3</div>
<div class="box" style="align-self: baseline">5</div>
<div class="box" style="align-self: stretch">6</div>
</div>
</div>