CSS3 요소

# CSS 웹킷 기반 스크롤 슬라이딩

-webkit-overflow-scrolling: touch;

 

 

# CSS 계산 (ie9+)

div { width : calc(100% - 50px); }

 

 

# CSS 영역 마스크 (ie8+) [상단, 오른쪽, 하단, 왼쪽]

div {vclip: rect(0px,50px,200px,10px); }

 

 

# CSS 마우스 이멘트 막기 (ie11+) [상단, 오른쪽, 하단, 왼쪽]

div.ex1 { pointer-events: none; }

 

 

 

 

# display : flex;
* flex-wrap: 유연한 항목 줄바꿈 여부.
         - nowrap (default) : 기본값  
         - wrap     : 유연한 형태 줄바꿈.

* flex-direction : 플렉스 - 방향   
     - row (default)     : 왼쪽부터
     - row-reverse      : 오른쪽부터
     - column            : 위에부터 
     - column-reverse : 아래부터

 

align-content :플렉스 라인을 정렬 (상하 기준)
       - normal, stretch (default) :  공간채움

- center      : 중앙 정열

- flex-start   : 왼쪽 정열

- flex-end    : 오른쪽 정열

       - space-around   : 양쪽 끝에 절반 크기의 공백
       - space-between : 양끝에서 채움
       - stretch               : 공간채움
        

* justify-content : 가로 정열
       - normal (default) : 정열안함.

- center      : 중앙 정열

- flex-start   : 왼쪽 정열

- flex-end    : 오른쪽 정열
- space-around   : 앞뒤 절만만큰 떨어진 상태간역

- space-between : 앞뒤 붙은 상태에서 동일하게 

- space-evenly    : 앞뒤 모두 같은 간격

* align-items : 세로 정열
       -normal,stretch(default) : 공간채움
       - center     : 중앙 정열

- flex-start : 상단 정열

- flex-end  : 하단 정열

- baseline  : 컨테이너의 기준선
- stretch    : 상하 꽉채우기

 

# display : flex; 자식요소

* flex :  유연한항목 비율 조정
    - 0 1 auto (default):
    - flex-basis   : 나머지 유연한 항목에 비해 항목이 얼마나 커질지 지정하는 숫자
    - flex-shrink  : 나머지 유연한 항목에 비해 항목이 축소되는 정도를 지정하는 숫자
    - flex-basis    : 항목의 길이. 유효한 값: "auto", "inherit" 또는 "%", "px", "em"
    -  auto : 1 1 auto.
    -  initial :  0 1 auto
    -  none : 0 0 auto.
    - inherit : 상속
    - 1 : 균등 비율만큼
    - 2 : 균등 2배 비율

* align-self : align-items 속성 재정의
     - auto (default) : align-items 상속, 없으면 "stretch" 속성
     - stretch      : 요소가 컨테이너에 맞게 배치됩니다.
     - center       : 요소가 컨테이너의 중앙에 위치합니다.
     - flex-start   : 요소는 컨테이너의 시작 부분에 위치합니다.
     - flex-end    : 요소가 컨테이너의 끝에 위치합니다.
     - baseline    : 요소가 컨테이너의 기준선에 배치됩니다.
     - initial          : 이 속성을 기본값으로 설정합니다.