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. 플렉스 박스
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   전기전자공학
  5.   방송/멀티미디어/정보이론
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   웹기술
            1. 웹 이란?
            2. 하이퍼텍스트
        1.   웹 구성
        2.   HTTP
        3.   웹 페이지
          1.   마크업 언어
          2.   DOM,BOM
          3.   웹 기능 요소
          4.   웹 디자인
                1. 웹 디자인
                2. 스타일 시트
            1.   CSS
                  1. CSS
                  2. CSS 리스트
                  3. CSS @ 규칙
              1.   CSS 구문 (선택자,속성,단위)
              2.   폰트,텍스트
              3.   색상,배경,그림자
              4.   박스모델 (마진,보더,여백,block,inline)
              5.   레이아웃,정렬
                1.   1. CSS 위치,레이아웃
                    2. 요소 display 유형
                    3. 요소 부유화 (float)
                    4. 요소 정렬
                    5. 플렉스 박스
              6.   특수효과 (변형)
              7.   미디어 쿼리 (반응형 웹)
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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