Customizable CSS
search

Flexbox utilities

By default you can use the class .row and .col to set flex direction

Justiy

You can change flexbox justify-content and aling-items with the following classes

<div class="row justify-start" >
  ...           
</div>
<div class="row justify-center" >
  ...               
</div>
<div class="row justify-end" >
  ...                 
</div>
col
col
col
col
col
col
col
col
col

Align

<div class="row align-start" >
  ...           
</div>
<div class="row align-center" >
  ...               
</div>
<div class="row align-end" >
  ...                 
</div>
col
col
col
col
col
col
col
col
col

Flex Wrap

You can change flex-wrap property with the following classes:

Class Porperty Value
.flex-no-wrap flex-wrap:none;
.flex-wrap flex-wrap:wrap;
.flex-wrap-reverse flex-wrap:wrap-reverse;

No wrap

<div class="row flex-no-wrap ..." >
  ...
</div>
col of 4
col of 4
col of 6

Wrap

<div class="row flex-wrap ..." >
  ...
</div>
col of 4
col of 4
col of 6

Wrap Reverse

<div class="row flex-wrap ..." >
  ...
</div>
col of 4
col of 4
col of 6

Shrink and Grow

yi

you can

Class Porperty Value
.flex-s flex-shrink:1;
.flex-s-0 flex-shrink:none;
.flex-g flex-grow:1;
.flex-g-0 flex-grow:0;

Flex

Flex 1

Adding class flex 1 to a children of a flex element will make then growth same sime;

<div class="row " >
    <div class="flex-1 ..."> 1 </div>
    <div class="flex-1 ..."> 2 </div>
    <div class="flex-1 ..."> 3 </div>
</div>
1
1
1

Flex auto

Adding class flex auto to a children of a flex element will make then growth if its content is bigger ;

<div class="row">
    <div class="flex-1 ..."> 1 </div>
    <div class="flex-1 ..."> 2 </div>
    <div class="flex-1 ..."> 3 </div>
</div>
Long text blabablabablabablabablabablaba
Nomal text
Normal text

Flex None

Adding class flex none to a children of a flex element will make then not to grow or shrink in order to fill its parent

<div class="row">
    <div class="flex-1 ..."> 1 </div>
    <div class="flex-1 ..."> 2 </div>
    <div class="flex-1 ..."> 3 </div>
</div>
Long text blabablabablabablabablabablaba
Nomal text
Normal text

On this page

Site

Support

Customizable CSS By Haniel Hernández. 2021