tailwind 의 layout w/ flex (2/2)

note1)  className ="flex flex-col md:flex-row" screen size 에 따라 responsive design 이 된 경우임. 즉 window size 에 따라 flex-col 와 flex-row 이 선택적으로 반영된다 

  <div className ="Parent">
    <div>Header</div>
    <div className ="flex flex-col md:flex-row">
      <div className ="w-32 bg-sky-500">Main content</div>
      <div className ="w-full bg-red-500">Sidebar</div>
    </div>
  </div>

flex-row 이 적용된 경우임 

 

flex-col 이 적용된 경우임

 

 

note2) window 크기에 따라 wrap 이 자동적으로 된다.

  <div className ="Parent">
    <div>Header</div>
    <div className ="flex flex-col md:flex-row">
      <div className ="flex flex-wrap w-full">
        <div className ="w-32  grow">01</div>
        <div className ="w-32  grow">02</div>
        <div className ="w-32  grow">03</div>
        <div className ="w-32  grow">04</div>
        <div className ="w-32  grow">05</div>
      </div>
    </div>
  </div>

 

note3) justify-center div 의 자식 div 인 Sidebar, Main content 가 중앙에 몰리게 된다

  <div className ="Parent">
    <div>Header</div>
    <div className ="flex justify-center">
        <div>Sidebar</div>
        <div>Main content</div>
    </div>
  </div>

 

note4)  다양한 content justification option 이 있음 (ex :  justify-evenly)

  <div className ="Parent">
    <div>Header</div>
    <div className ="flex justify-evenly">
        <div>Sidebar</div>
        <div>Main content</div>
        <div>another element</div>
      </div>
  </div>

 

 

note5) content 의 base line 을 맞추어 vertical align 을 한다

  <div className="flex items-baseline ...">
    <div className="bg-sky-500 pt-2 pb-6">01</div>
    <div className="bg-red-500 pt-8 pb-12">02</div>
    <div className="bg-green-500 pt-12 pb-4">03</div>
  </div>