Tutorial

Sign Up

log In

CSS
CSS Flex Items

❮ Previous

Next ❯

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

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>

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.