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 플렉스

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