CSS tailwind basis 사용 예시 / flex-1 게시판

agnusdei1207 2023. 4. 27. 12:08

SMALL

<div class="flex font-bold w-full">
    <div class="flex basis-1/12 py-4 pl-4 items-center justify-center">
      번호
    </div>
    <div class="flex basis-1/12 py-4 pl-4 items-center justify-center">
      카테고리
    </div>
    <div class="flex basis-1/12 py-4 pl-4 items-center">제목</div>
    <div class="flex basis-5/12 py-4 pl-4 items-center">주요내용</div>
    <div class="flex basis-1/12 py-4 pl-4 items-center justify-center">
      작성자
    </div>
    <div class="flex basis-1/12 py-4 pl-4 items-center justify-center">
      일자
    </div>
    <div class="flex basis-1/12 py-4 pl-4 items-center justify-center">
      상태
    </div>
  </div>

1. basis 예시

<div class="flex text-gray-700 font-semibold w-full">
    <div class="flex flex-1 justify-center p-4">지점정보</div>
    <div class="flex flex-1 justify-center p-4">주문정보</div>
    <div class="flex flex-1 justify-center p-4">주문품목</div>
    <div class="flex flex-1 justify-center p-4">주문금액</div>
    <div class="flex flex-[2] justify-center p-4">상태</div>
    <div class="flex flex-[2] justify-center p-4">주문시간</div>
  </div>

2. flex-1 예시

LIST