Flex

Display

          
    <div class="d-flex bg-gray-100 p-5">flex 영역입니다.</div>
    <div class="display-block bg-gray-100 p-5">inline-flex 영역입니다.</div>
        

Direction

flex row

• .flex-row로 가로 방향(기본값)을 설정하거나, .flex-row-reverse로 반대쪽에서 가로 방향으로 시작하는 데 사용합니다.

          
    <div class="d-flex flex-row">
      <div class="d-flex bg-gray-100 p-5">Flex item 1</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 2</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 3</div>
    </div>
    
    <div class="d-flex flex-row-reverse">
      <div class="d-flex bg-gray-100 p-5">Flex item 1</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 2</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 3</div>
    </div>
        

flex column

• .flex-column은 세로 방향으로 설정하거나, .flex-column-reverse로 반대쪽에서 세로 방향으로 시작하는 데 사용합니다.

          
    <div class="d-flex flex-column">
      <div class="d-flex bg-gray-100 p-5">Flex item 1</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 2</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 3</div>
    </div>
    
    <div class="d-flex flex-column-reverse">
      <div class="d-flex bg-gray-100 p-5">Flex item 1</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 2</div>
      <div class="d-flex bg-gray-100 p-5">Flex item 3</div>
    </div>
        

Justify content

          
    <div class="d-flex justify-content-start">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-end">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-center">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-between">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-around">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex justify-content-evenly">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
        

Align items

          
    <div class="d-flex align-items-start">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex align-items-end">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex align-items-center">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex align-items-baseline">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>
    <div class="d-flex align-items-stretch">
      <div class="p-5 bg-white">Flex item 1</div>
      <div class="p-5 bg-white">Flex item 2</div>
      <div class="p-5 bg-white">Flex item 3</div>
    </div>