CSS Flex   CSS 플렉스

(2022-01-16)

Flexbox, 플렉스 박스, 유동형 상자, Flexible Box, 플렉시블 박스

1. 플렉시블 박스 (Flexible Box)사이트 화면의 구조 설계를 쉽게 하기 위해, 가변적인 박스를 만들어내는 CSS 기술


2. CSS Flex

  ※ ☞ MDN Flexbox docs 참조

  ㅇ container 속성
     - display : flex;
     - flex-direction : row (기본) | row-reverse | column | column-reverse;
        . row : 수평 줄 방향
        . column : 수직 열 방향
     - flex-wrap : nowrap (기본) | wrap | wrap-reverse;
        . 한 줄에 flex item들을 모두 수용할 지 여부
     - flex-flow : (flex-direction) (flex-wrap);
        . (flex-direction),(flex-wrap)를 한번에 지정할 수 있는 단축 속성
     - justify-content : flex-start (기본) | flex-end | center | space-between | space-around | 
                         space-evenly;
        . 항목 배치의 기준을 정함
           .. space-between (가장자리 우선)
           .. space-around (가장자리 공간 줌)
           .. space-evenly (균등 간격)
     - align-items : flex-start | flex-end | center | stretch | baseline; 
        . flex-start, flex-end, center (아이템 박스의 가장자리 끝선, 중간선으로 정렬)
        . stretch (높이 미설정 item들에 주변 가장 큰 height 또는 weight와 같게 함)
        . baseline (아이템 박스 내부의 텍스트를 기준선으로 맞춤)
     - align-content : flex-start | flex-end | center | stretch | space-between | space-around;
        . (아이템 박스 내부의 컨텐츠 기준으로 정렬)
        . flex-start, flex-end, center (아이템 박스 내부의 컨텐츠 기준으로 수직 정렬)
        . stretch (각 item 높이를 가능한 최대로 넓혀 수직 정렬)
        . space-between, space-around (가장자리에 붙이거나, 주가장자리 공간 줌)

  ㅇ item 속성
     - order : (순서 정수값)
        . 항목 배치 순서 : 숫자를 이용하여 순서 배치할 수 있으며, 음수 값도 가능 
     - flex-grow : (크기 늘리는 양의 정수값, 기본값 0 : 0 보다 큰 값)
        . 1 : 항목 크기가, 전체 크기에 비례하여, 똑같이 커짐 (단순 비례)
     - flex-shrink : (크기 줄이는 양의 정수 값, 기본값 1 : 1 보다 큰 값)
        . flex-basis와 연동되어, 그 기본 크기 보다 정해준 배수 값으로 줄여줌
        . 그러나, flex-basis로 정해준 기본 크기를 넘으면, 더 이상 flex-shrink 영향 없게 됨
     - flex-basis : (length) | auto(기본)
        . 적정 너비의 기본 크기를 정해주는 값
        . (px,%,em,rem 등 단위로 직접 크기 값을 줌, 기본값 auto)
     - flex : none | (flex-grow) (flex-shrink) (flex-basis)
        . (flex-grow),(flex-shrink),(flex-basis)를 한번에 지정할 수 있는 단축 속성
        . (기본값) 1 1 auto
     - align-self : auto | flex-start (기본) | flex-end | center | baseline | stretch
        . 항목별 개별 배치


[레이아웃,정렬] 1. CSS 위치,레이아웃 2. 요소 display 유형 3. 요소 부유화 (float) 4. 요소 정렬 5. 플렉스 박스

 
        최근수정     요약목록     참고문헌