본문으로 바로가기

Tailwind CSS Flexbox & Grid

category CSSTailwind CSS 3년 전

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>

 

반응형
저작자표시 비영리 동일조건

CSSTailwind CSS카테고리의 다른글

Tailwind CSS Animation  (0) 2022.05.06
Tailwind CSS Transitions  (0) 2022.05.06
Tailwind CSS 기본 속성  (0) 2022.05.06
Tailwind CSS 기본 예제  (0) 2022.05.06
Tailwind CSS 소개  (0) 2022.05.04
댓글
THE STAR SHINING IN THE MIDDLE
블로그 이미지 #1997 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바