Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 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.


Syntax:

order-{size?}-{value}
  • order: Indicates flex order.
  • size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):
  • value (optional): Responsive breakpoint (e.g., 0, 1, 2, 3, 4, 5):


Example:

  • .order-1
  • .order-sm-1
  • .order-md-1
  • .order-lg-1
  • .order-xl-1
  • .order-xxl-1
1
2
3
Example
<div class="flex-container d-flex">
<div class="box rounded-2 m-1 bg-danger text-center order-3" >1</div>
<div class="box rounded-2 m-1 bg-primary text-center order-2" >2</div>
<div class="box rounded-2 m-1 bg-success text-center order-1" >3</div>
</div>

Try it yourself

Flex Grow & Flex Shrink:


Syntax:

flex-{size?}-{type}-{value}
  • flex: Indicates flex.
  • size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):
  • type : grow | shrink:
  • value : size (e.g., 0, 1):


Example:

  • .flex-{grow | shrink}-0
  • .flex-sm-{grow | shrink}-1
  • .flex-md-{grow | shrink}-1
  • .flex-lg-{grow | shrink}-1
  • .flex-xl-{grow | shrink}-1
  • .flex-xxl-{grow | shrink}-1
Flex Grow
1
2
2
3

Flex Shrink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Flex grow Example
<div class="flex-container d-flex">
<div class="box rounded-2 m-1 bg-danger text-center flex-grow-0" >1</div>
<div class="box rounded-2 m-1 bg-primary text-center flex-grow-1" >2</div>
<div class="box rounded-2 m-1 bg-primary text-center flex-grow-1" >2</div>
<div class="box rounded-2 m-1 bg-success text-center order-1 flex-grow-0" >3</div>
</div>

Try it yourself
Flex shrink Example
<div class="flex-container d-flex">
<div class="box rounded-2 m-1 text-center" >1</div>
<div class="box rounded-2 m-1 text-center">2</div>
<div class="box rounded-2 m-1 text-center">3</div>
<div class="box rounded-2 m-1 text-center">4</div>
<div class="box rounded-2 m-1 text-center">5</div>
<div class="box rounded-2 m-1 text-center">6</div>
<div class="box rounded-2 m-1 text-center flex-shrink-0" >7</div>
<div class="box rounded-2 m-1 text-center flex-shrink-0" >8</div>
<div class="box rounded-2 m-1 text-center flex-shrink-0" >9</div>
<div class="box rounded-2 m-1 text-center flex-shrink-0" >10</div>
<div class="box rounded-2 m-1 text-center">11</div>
<div class="box rounded-2 m-1 text-center">12</div>
<div class="box rounded-2 m-1 text-center">13</div>
</div>

Try it yourself

Align Self:

Align an individual flex item vertically.


Syntax:

align-self-{size?}-{type}
  • align-self: Indicates flex align self.
  • size (optional): Responsive breakpoint (e.g., sm, md, lg, xl, xxl):
  • type : Defines the direction of the margin (e.g., start, end, center, baseline,stretch).


Example:

  • .align-self-start
  • .align-self-sm-start
  • .align-self-md-start
  • .align-self-lg-start
  • .align-self-xl-start
  • .align-self-xxl-start
1
2
3
4
5
Example
<div class="flex-container d-flex">
<div class="box rounded-2 m-1 text-center align-self-start" >1</div>
<div class="box rounded-2 m-1 text-center align-self-end">2</div>
<div class="box rounded-2 m-1 text-center align-self-center">3</div>
<div class="box rounded-2 m-1 text-center align-self-baseline">4</div>
<div class="box rounded-2 m-1 text-center align-self-stretch">5</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.