해온의 우당탕 개발일지

FrameWork/Tailwind

플렉스, 그리드 조절하기

jheaon ・ 2023. 11. 5. 22:46

 

 

이번에는 tailwind을 이용한 플렉스, 그리드를 조절하는 방법에 대해서 소개하고자 한다. 

 

 

 

플렉스

tailwind에서 flex는 하나의 공간을 의미하며, 공간의 크기를 조절하기 위해서 사용 한다. 일반적인 flex는 가로로 아이템이 쌓이며 flex-col을 통해 세로로 아이템들을 세울 수 있다. 만약 아이템이 flex박스를 넘어갈 때, 줄바꿈이 되길 원한다면 flex flex-wrap 클래스를 사용하면 된다. 

 

항상 flex를 사용하다 보면, items와 justify에 대해서도 같이 나오는데 이에 대해서 알아본다. 

 

justify와 items

간단하게 설명하면 justfiy와 items는 정렬을 하기 위한 클래스이다. 아이템들을 위, 아래로 정렬하기 위해서는 items, 좌, 우로 정렬하기 위해서는 justify을 사용한다고 이해하면 쉽다. 

 

justify는 주로 아래와 같이 사용된다. 

 

  • justify-start 
  • justify-center 
  • justify-end 
  • justify-between 

 

 

 

items는 다음과 같이 사용된다. 

  • items-start
  • items-center
  • items-end

 

 

- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Flex</title>
  </head>
  <body>
    <!-- Flex and alignment -->
    <div
      class="flex flex-wrap h-72 w-100 bg-gray-100 justify-around items-center"
    >
      <div class="p-10 border border-blue-600 bg-blue-100">01</div>
      <div class="p-10 border border-blue-600 bg-blue-100">02</div>
      <div class="self-start p-10 border border-blue-600 bg-blue-100">03</div>
      <div class="self-end p-10 border border-blue-600 bg-blue-100">04</div>
    </div>

    <!-- Flex Column, Gap and Order -->
    <div
      class="flex flex-col gap-4 w-100 bg-gray-200 justify-around items-center"
    >
      <div class="order-4 p-10 border border-blue-600 bg-blue-100">01</div>
      <div class="order-1 p-10 border border-blue-600 bg-blue-100">02</div>
      <div class="p-10 border border-blue-600 bg-blue-100">03</div>
      <div class="p-10 border border-blue-600 bg-blue-100">04</div>
    </div>

    <!-- Grow and shrink -->
    <div class="flex w-100 bg-gray-300">
      <!-- flex-none: Prevent item from growing or shrinking -->
      <div class="w-64 flex-none p-10 border border-blue-600 bg-blue-100">
        01
      </div>
      <!-- flex-initial:  Allow item to shrink but not grow, taking into account its initial size  -->
      <div class="w-64 flex-initial p-10 border border-blue-600 bg-blue-100">
        02
      </div>
      <!-- flex-auto: Allow item to grow and shrink, taking into account its initial size -->
      <div class="w-64 flex-auto p-10 border border-blue-600 bg-blue-100">
        03
      </div>
      <!-- flex-1: Allow item to grow and shrink as needed, ignoring its initial size -->
      <div class="w-64 flex-1 p-10 border border-blue-600 bg-blue-100">04</div>
      <div class="p-10 border border-blue-600 bg-blue-100">05</div>
      <div class="p-10 border border-blue-600 bg-blue-100">06</div>
      <div class="p-10 border border-blue-600 bg-blue-100">07</div>
    </div>
  </body>
</html>

<!-- Justify Content
      justify-start	      justify-content: flex-start;
      justify-end	        justify-content: flex-end;
      justify-center	    justify-content: center;
      justify-between	    justify-content: space-between;
      justify-around	    justify-content: space-around;
      justify-evenly	    justify-content: space-evenly;
    -->

<!-- 
      items-start	align-items: flex-start;
      items-end	align-items: flex-end;
      items-center	align-items: center;
      items-baseline	align-items: baseline;
      items-stretch	align-items: stretch;
     -->

<!-- Flex Direction
      flex-row	        flex-direction: row;
      flex-row-reverse	flex-direction: row-reverse;
      flex-col	        flex-direction: column;
      flex-col-reverse	flex-direction: column-reverse;
    -->

<!-- 
      flex-wrap	        flex-wrap: wrap;
      flex-wrap-reverse	flex-wrap: wrap-reverse;
      flex-nowrap	      flex-wrap: nowrap;
     -->

<!-- Flex Properties
      flex-none	    flex: none;     
      Prevent item from growing or shrinking

      flex-initial	flex: 0 1 auto; 
      Allow item to shrink but not grow, taking into account its initial size

      flex-auto	    flex: 1 1 auto; 
      Allow item to grow and shrink, taking into account its initial size

      flex-1	      flex: 1 1 0%;   
      Allow item to grow and shrink as needed, ignoring its initial size
    -->

 

 

 

 

그리드

그리드는 표 형식으로 아이템을 구성할때 자주 사용한다. 행과 열을 조절 할때는 grid grid-cols-3 이나 grid-rows-4을 사용하여  행과 열을 조절 할 수 있다. 만약에 그리드의 특정 영역을 다르게 설정한다면 가로는 col-span-2, 세로는 row-span-2 처럼하여 영역을 조절하여 사용 할 수 있다. 

 

- index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Grid</title>
  </head>
  <body>
    <!-- Grid cols and rows -->
    <div class="grid grid-cols-3 grid-rows-4 gap-4 w-100 bg-gray-100">
      <div class="p-10 border border-blue-600 bg-blue-100">01</div>
      <div class="p-10 border border-blue-600 bg-blue-100">02</div>
      <div class="p-10 border border-blue-600 bg-blue-100">03</div>
      <div class="p-10 border border-blue-600 bg-blue-100">04</div>
      <div class="p-10 border border-blue-600 bg-blue-100">05</div>
      <div class="p-10 border border-blue-600 bg-blue-100">06</div>
      <div class="p-10 border border-blue-600 bg-blue-100">07</div>
      <div class="p-10 border border-blue-600 bg-blue-100">08</div>
      <div class="p-10 border border-blue-600 bg-blue-100">09</div>
    </div>

    <!-- Col and row span -->
    <div class="grid grid-cols-3 gap-4 w-100 bg-gray-100">
      <div
        class="col-span-2 row-span-2 p-10 border border-blue-600 bg-blue-100"
      >
        01
      </div>
      <div class="p-10 border border-blue-600 bg-blue-100">02</div>
      <div class="p-10 border border-blue-600 bg-blue-100">03</div>
      <div class="p-10 border border-blue-600 bg-blue-100">04</div>
      <div class="p-10 border border-blue-600 bg-blue-100">05</div>
      <div class="p-10 border border-blue-600 bg-blue-100">06</div>
      <div class="col-span-3 p-10 border border-blue-600 bg-blue-100">07</div>
      <div class="p-10 border border-blue-600 bg-blue-100">08</div>
      <div class="col-span-2 p-10 border border-blue-600 bg-blue-100">09</div>
      
    </div>
  </body>
</html>

<!-- 
  Grid Template Columns
  grid-cols-1	    grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-cols-2	    grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-cols-3	    grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-cols-4	    grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-cols-5	    grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-cols-6	    grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-cols-7	    grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-cols-8	    grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-cols-9	    grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-cols-10	  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-cols-11	  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-cols-12	  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-cols-none	grid-template-columns: none;
 -->

<!-- Grid Template Rows
  grid-rows-1	    grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-rows-2	    grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-rows-3	    grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-rows-4	    grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-rows-5	    grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-rows-6	    grid-template-rows: repeat(6, minmax(0, 1fr));
  grid-rows-none	grid-template-rows: none;
  -->
저작자표시

'FrameWork > Tailwind' 카테고리의 다른 글

Tailwind로 Html 작성할 때 사용했던 단축키나 팁들  (0) 2023.11.07
트랜스폼, 애니메이션 조절하기  (1) 2023.11.06
테두리, 필터, 상호작용 조절하기  (0) 2023.11.05
공간 사이즈, 레이아웃, 그림자와 그라데이션 조절하기  (0) 2023.11.05
색 , 컨테이너와 공간, 타이포그래피 조절하기  (0) 2023.11.05

'FrameWork/Tailwind'의 다른글

  • 현재글 플렉스, 그리드 조절하기

관련글

티스토리툴바