CSS Floats

요소를 띄어서 텍스트 및 인라인 요소가 그 주위를 감싸도록 하는 배치

(왼쪽 혹은 오른쪽으로 띄워 normal flow에서 벗어남 )

.float-left {
  float: left;
}

CSS Flexbox

요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식

✔️ Flex 기본 사항

---

• main axis (주 축)

  • flex item들이 배치되는 기본 축
  • main start에서 시작하여 main end 방향으로 배치

• cross axis (교차 축)

  • main axis에 수직인 축
  • cross start에서 시작하여 cross end 방향으로 배치

• Flex container

  • display: flex; 혹은 display: inline-flex; 가 설정된 부모 요소
  • 이 컨테이너의 1차 자식 요소들이 Flex item이 됨
  • flexbox 속성 값들을 사용하여 자식 요소 Flex item

• Flex item

  • flex container 내부에 레이아웃 되는 항목

        flex 속성
    
        - flex contaniner 관련 속성 : display, flex-direction, flex-wrap, justify-content, align-items, align-content
    
        flex item 관련 속성
    
        - oalign-self, flex-grow, flex-shrink, flex-basis, order

css_flexbox 설명

flexbox_네이버

mdn_flex