[CSS] 플렉스 박스 레이아웃

Flexbox (플렉스 박스)

  - 웹 페이지의 레이아웃을 조정/배치하는 데 사용되는 CSS 속성

  - 요소를 수평/수직으로 정렬하고 공간을 분배함

 

# 자식 요소의 배치/정렬은 항상 부모 요소를 기준으로 생각해야 함

 

구성요소

 

  1) 플렉스 컨테이너 (Flex container)

      - Flexbox를 사용하여 요소를 배치하는 부모 요소

      - height를 지정해주지 않으면, 컨테이너 내 자식 요소의 높이만큼으로 자동 지정됨

      - 플렉스 컨테이너는 바로 아래 자식 요소까지만 영향을 미침

  2) 플렉스 아이템 (Flex items)

      - 플렉스 컨테이너 내에서 배치되는 자식 요소

  3) 주축 (Main axis) & 교차축 (Cross axis)

      - 플렉스 컨테이너 내에서 요소가 배치되는 축

 

플렉스 항목 배치

부모요소 { 
    display : flex | inline-flex ;
    flex-direction : row | row-inverse | column | column-inverse ;
    flex-wrap : no-wrap | wrap | wrap-reverse ;
}

 

  - display 속성

      · flex : 플렉스 박스를 박스 레벨 요소로 정의

      · inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의

 

  - flex-direction 속성

      : 플렉스 컨테이너에서 플렉스 아이템들의 배치 방향을 지정함

      · row (기본값) : 주축을 가로로, 교차축을 세로로

      · row-inverse : row와 좌우 방향 반대로

      · column : 주축을 세로로, 교차축을 가로로

     · column-inverse : column과 상하 방향 반대로

 

  - flex-wrap 속성

      : 플렉스 컨테이너의 아이템이 화면 너비를 초과할 경우, 강제로 다음 줄로 이동시킬지 여부 결정

      · no-wrap (기본값) : 한 줄로 표시 

      · wrap : 여러 줄로 표시

      · wrap-reverse : wrap과 방향을 반대로

 

플렉스 항목 배치 관련 속성 한 번에 표기

부모요소 { flex-flow : 방향속성 줄배치속성 ; }

 

 

반응형

728x90

---

플렉스 항목 수평 방향 (가로) 정렬 - 주축 가로, 교차축 세로 기준

부모요소 { justify-content : 속성값 ; }

 

  - flex-start

      : 주축의 시작점을 기준으로 배치 (왼쪽)

  - flex-end

      : 주축의 끝점을 기준으로 배치 (오른쪽)

  - center

      : 주축의 중앙을 기준으로 배치 (가운데)

  - space-between

      : 첫 번째 항목과 마지막 항목은 시작점과 끝점에 배치한 후, 나머지 항목들은 같은 간격으로 배치함

  - space-around

      : 모든 항목을 같은 간격으로 배치함

 

플렉스 항목 수직 방향 (세로) 정렬 - 주축 가로, 교차축 세로 기준

부모요소 { align-items : 속성값 ; }
/* 또는 */
항목요소 { align-self : 속성값 ; }

 

  - stretch (기본값)

      : 항목을 세로로 확장해 교차축을 꽉 채움

  - flex-start

      : 교차점의 시작점을 기준으로 배치 (위쪽)

  - flex-end

      : 교차점의 끝점을 기준으로 배치 (아래쪽)

  - center

      : 교차점의 중앙을 기준으로 배치 (가운데)

 

 

---

플렉스 항목들의 너비/높이를 부모 너비 기준 1:1:1:... 씩 지정

자식요소 {
    /* 주축 기본값 (row)이면 가로로 1:1:1:... */
    /* 주축 column 설정 시 세로로 1:1:1:... */
    flex : 1;
}

 

  - 같은 플렉스 컨테이너를 갖는 자식요소끼리 flex 속성의 속성 값 만큼의 비율에 따라

    부모 요소의 너비(높이)를 나눠 가짐

    ex) 자식요소1의 flex : 10, 자식요소2의 flex : 1

          → 자식요소1이 부모의 10/11 만큼, 자식요소2가 부모의 1/11 만큼 가짐

 

 

---

플렉스 항목 배치 순서 변경

/* 요소3 - 요소1 - 요소2 순으로 배치됨 */
항목요소1 { order : 2 ; }
항목요소2 { order : 3 ; }
항목요소3 { order : 1 ; }