Tailwind CSS Flexbox & Grid

Flex Basis

https://tailwindcss.com/docs/flex-basis

Class	flex-basis
basis-0	0px
basis-1	0.25rem
basis-auto	auto
basis-px	1px
basis-0.5	0.125rem
basis-1/2	50%
basis-full	100%

01

02

03

<div class="flex flex-row space-x-4 font-mono text-white text-sm font-bold leading-6">
    <div class="basis-1/4 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">01</div>
    <div class="basis-1/4 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">02</div>
    <div class="basis-1/2 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">03</div>
  </div>

 

Flex Direction

https://tailwindcss.com/docs/flex-direction

Class	flex-direction
flex-row	row
flex-row-reverse	row-reverse
flex-col	column
flex-col-reverse	column-reverse

01

02

03

<div class="flex flex-row space-x-4 font-mono text-white text-sm font-bold leading-6">
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">01</div>
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">02</div>
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">03</div>
  </div>

 

Flex Wrap

https://tailwindcss.com/docs/flex-wrap

Class	flex-wrap
flex-wrap	wrap
flex-wrap-reverse	wrap-reverse
flex-nowrap	nowrap

01

02

03

<div class="flex flex-nowrap gap-4 font-mono text-white text-sm font-bold leading-6 bg-stripes-sky rounded-lg">
    <div class="w-2/5 flex-none last:pr-8">
      <div class="p-4 w-full rounded-lg flex items-center justify-center bg-sky-500 shadow-lg">01</div>
    </div>
    <div class="w-2/5 flex-none last:pr-8">
      <div class="p-4 w-full rounded-lg flex items-center justify-center bg-sky-500 shadow-lg">02</div>
    </div>
    <div class="w-2/5 flex-none last:pr-8">
      <div class="p-4 w-full rounded-lg flex items-center justify-center bg-sky-500 shadow-lg">03</div>
    </div>
  </div>

 

Flex

https://tailwindcss.com/docs/flex

Class	flex
flex-1	1 1 0%
flex-auto	1 1 auto
flex-initial	0 1 auto
flex-none	none

01

02

03

<div class="mt-2 flex gap-4 text-white text-sm font-bold font-mono leading-6 bg-stripes-blue rounded-lg">
    <div class="p-4 flex-none w-14 h-14 rounded-lg flex items-center justify-center bg-blue-300 dark:bg-blue-800 dark:text-blue-500">01</div>
    <div class="p-4 flex-initial w-24 sm:w-64 rounded-lg flex items-center justify-center bg-blue-500 shadow-lg">02</div>
    <div class="p-4 flex-initial w-14 sm:w-32 rounded-lg flex items-center justify-center bg-blue-500 shadow-lg">03</div>
  </div>

 

Flex Grow

https://tailwindcss.com/docs/flex-grow

Class	flex-frow
grow	1
grow-0	0

01

02

03

<div class="flex gap-4 text-white text-sm font-bold font-mono leading-6 bg-stripes-indigo rounded-lg">
    <div class="w-14 h-14 flex-none rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
      01
    </div>
    <div class="p-4 grow rounded-lg flex items-center justify-center bg-indigo-500 shadow-lg">
      02
    </div>
    <div class="p-4 w-14 h-14 flex-none rounded-lg flex items-center justify-center bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
      03
    </div>
  </div>

 

Grid Template Columns

https://tailwindcss.com/docs/grid-template-columns

Class	grrid-template-columns
grid-cols-1	repeat(1, minmax(0, 1fr))
grid-cols-12	repeat(12, minmax(0, 1fr))
grid-cols-none	none

01

02

03

04

05

06

07

08

09

<div class="grid grid-cols-4 gap-4 font-mono text-white text-sm text-center font-bold leading-6 bg-stripes-fuchsia rounded-lg">
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">01</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">02</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">03</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">04</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">05</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">06</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">07</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">08</div>
    <div class="p-4 rounded-lg shadow-lg bg-fuchsia-500">09</div>
  </div>

 

Gap

https://tailwindcss.com/docs/gap

Class	Properties
gap-0	gap: 0px;
gap-x-0	column-gap: 0px;
gap-y-0	row-gap: 0px;
gap-px	gap: 1px;
gap-x-0.5	column-gap: 0.125rem;
gap-y-1	row-gap: 0.25rem;

01

02

03

04

<div class="grid grid-cols-2 gap-4 font-mono text-white text-sm text-center font-bold leading-6 bg-stripes-violet rounded-lg">
    <div class="p-4 rounded-lg shadow-lg bg-violet-500">01</div>
    <div class="p-4 rounded-lg shadow-lg bg-violet-500">02</div>
    <div class="p-4 rounded-lg shadow-lg bg-violet-500">03</div>
    <div class="p-4 rounded-lg shadow-lg bg-violet-500">04</div>
  </div>

 

Justify Content

https://tailwindcss.com/docs/justify-content

Class	justify-content
justify-start	flex-start
justify-end	flex-end
justify-center	center
justify-between	space-between
justify-around	space-around
justify-evenly	space-evenly

01

02

03

<div class="flex justify-center space-x-4 font-mono text-white text-sm font-bold leading-6 bg-stripes-blue rounded-lg">
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-blue-500 shadow-lg">01</div>
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-blue-500 shadow-lg">02</div>
    <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-blue-500 shadow-lg">03</div>
  </div>

 

Justify Items

https://tailwindcss.com/docs/justify-items

Class	justify-items
justify-items-start	start
justify-items-end	end
justify-items-center	center
justify-items-stretch	stretch

01

02

03

04

05

06

<div class="grid grid-cols-3 gap-4 font-mono text-white text-sm font-bold leading-6">
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">01</div>
    </div>
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">02</div>
    </div>
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">03</div>
    </div>
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">04</div>
    </div>
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">05</div>
    </div>
    <div class="bg-stripes-fuchsia grid rounded-lg justify-items-center">
      <div class="w-14 h-14 rounded-lg flex items-center justify-center bg-fuchsia-500 shadow-lg">06</div>
    </div>
  </div>

 

Align Content

https://tailwindcss.com/docs/align-content

Class	align-content
content-center	center
content-start	flex-start
content-end	flex-end
content-between	space-between
content-around	space-around
content-evenly	space-evenly

01

02

03

04

05

<div class="grid grid-cols-3 gap-4 content-center w-full rounded-lg bg-stripes-sky text-center h-56">
      <div class="p-4 shadow-lg rounded-lg bg-sky-500">01</div>
      <div class="p-4 shadow-lg rounded-lg bg-sky-500">02</div>
      <div class="p-4 shadow-lg rounded-lg bg-sky-500">03</div>
      <div class="p-4 shadow-lg rounded-lg bg-sky-500">04</div>
      <div class="p-4 shadow-lg rounded-lg bg-sky-500">05</div>
    </div>

 

Align Items

https://tailwindcss.com/docs/align-items

Class	align-items
items-start	flex-start
items-end	flex-end
items-center	center
items-baseline	baseline
items-stretch	stretch

01

02

03

<div class="flex items-center gap-4 w-full rounded-lg bg-stripes-violet text-center">
      <div class="py-4 flex-1 flex items-center justify-center shadow-lg rounded-lg bg-violet-500">01</div>
      <div class="py-12 flex-1 flex items-center justify-center shadow-lg rounded-lg bg-violet-500">02</div>
      <div class="py-8 flex-1 flex items-center justify-center shadow-lg rounded-lg bg-violet-500">03</div>
    </div>