깜놀하는 해므찌로

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

IT

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

'IT' 카테고리의 다른 글

C언어 다차원 배열 기초 사용법 예시  (0) 2023.04.27
Typescript sort 역순 예시 / angular 2가지 방법  (0) 2023.04.27
C언어 기초 알고리즘 배열 내 가장 큰 수 찾기 예시  (0) 2023.04.26
CSS select box custom Primary feat.tailwind  (0) 2023.04.26
Angular component string to template HTML / 컴포넌트 string 템플릿에서 html로 읽는 방법 예시  (0) 2023.04.26
'IT' Related Articles more