tailwind 의 layout w/ flex (1/2)

note1) flex class 가 있는 div 안의 child 는 옆으로 layout 이 만들어 진다

 <div className ="flex" >
    <div className="w-16 h-16 bg-red-500"></div>
    <div className="w-16 h-16 bg-green-500"></div>
  </div>

 

note2) ½ 는 가로의 비율을 의미함 (50%”50%) 

 <div className ="flex" >
    <div className="w-1/2 h-16 bg-red-500"></div>
    <div className="w-1/2 h-16 bg-green-500"></div>
  </div>

 

note3) min-h-screen : min height 가 screen size 임, width 는 각각 전체 width 의 20% 80% 로 배정함 

  <div className ="flex" >
    <div className="w-1/5 h-16 bg-red-500 min-h-screen">Sidebar</div>
    <div className="w-4/5 h-16 bg-green-500">Main content</div>
  </div>

 

note4) min-h-screen 이 div 를 full screen 을 차지하게 함

 <div className ="flex min-h-screen" >
    <div className="w-1/5 bg-red-500">Sidebar</div>
    <div className="w-4/5 bg-green-500">Main content</div>
  </div>

 

note5)  space-x-4 : child element 간에  space 를 x 축으로 4 point 를 준다.

 <div className ="flex min-h-screen space-x-4">
    <div className="w-1/5 bg-red-500">Sidebar</div>
    <div className="w-4/5 bg-green-500">Main content</div>
  </div>

 

note6)  flex-col  : position items  vertically

 <div className ="flex flex-col min-h-screen space-y-4">
    <div className="w-1/5 bg-red-500">Sidebar</div>
    <div className="w-4/5 bg-green-500">Main content</div>
  </div>

min-h-screen 은 효과를 미치지 못하고 있음.

 

note7)  min-h-screen 로 인하여 height 가 full screen 이고, space-x-4 로 인하여 가로로 item 간 space 가 생긴다.

 <div className ="flex min-h-screen space-x-4">
    <div className="w-1/5 bg-red-500">Sidebar</div>
    <div className="w-4/5 bg-green-500">Main content</div>
  </div>

 

note8) flex-row-reverse, flex-col 와 같은 class 는 flex 이 반드시 미리 와야 한다.

  <div className ="Parent">
    <div>Header 1</div>
    <div className ="flex flex-row-reverse">
      <div>Main content 2</div>
      <div className ="flex flex-col">
        <div>Sidebar 3</div>
        <div>Menu 4</div>
      </div>
    </div>
  </div>

 

note9) Use the basis-{size} utilities to set the initial size of flex items.

  <div className ="Parent">
    <div>Header</div>
    <div className ="flex">
      <div className ="basis-3/4">Main content</div>
      <div className ="basis-1/4">Sidebar</div>
    </div>
  </div>