CSS Flex   CSS 플렉스

(2020-12-02)

Flexbox

1. CSS Flex

  ※ ☞ MDN Flexbox docs 참조

  ㅇ container 속성
     - display : flex;
     - flex-direction : row (기본) | row-reverse | column | column-reverse;
     - flex-wrap : nowrap (기본) | wrap | wrap-reverse;
     - flex-flow : (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)
        . 1 (전체 크기가 커지는 정도에 단순 비례)
     - flex-shrink : (크기 줄이는 양의 정수 값, 기본값 1)
     - flex-basis : (px,%,em,rem 등으로 직접 크기 값을 줌, 기본값 auto)
     - flex : none | (flex-grow) (flex-shrink) (flex-basis)
     - align-self : auto | flex-start (기본) | flex-end | center | baseline | stretch
        . 아이템별 개별 배치

  ㅇ ... (편집중) ...


[CSS] 1. CSS 2. CSS 선택자 3. CSS 속성 4. CSS 속성값 5. CSS 박스 모델 6. block,inline 요소 유형 7. CSS 색상 8. CSS 배경 9. CSS 위치,레이아웃 10. CSS 정렬 11. CSS 텍스트 12. CSS 폰트 13. CSS 리스트 14. CSS @ 규칙 15. CSS 그림자 16. CSS 시간 변형 17. CSS 2차원 변형 18. CSS 플렉스
  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.   1. CSS
                  2. CSS 선택자
                  3. CSS 속성
                  4. CSS 속성값
                  5. CSS 박스 모델
                  6. block,inline 요소 유형
                  7. CSS 색상
                  8. CSS 배경
                  9. CSS 위치,레이아웃
                  10. CSS 정렬
                  11. CSS 텍스트
                  12. CSS 폰트
                  13. CSS 리스트
                  14. CSS @ 규칙
                  15. CSS 그림자
                  16. CSS 시간 변형
                  17. CSS 2차원 변형
                  18. CSS 플렉스
        4.   웹 식별
        5.   웹 서비스
        6.   차세대 웹
        7.   웹기술 기타일반
      9.   인터넷 응용
      10.   인터넷 기타
      11.   패킷교환(PSN)
      12.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공학일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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