flex 브라우저 지원 속성(webkit, ms)

가장 많이 사용하고 있는 flex 속성의

브라우저 지원 속성들 나열

 

* flex-grow : 속성값이 0이면 부모의 크기가 커져도 원래대로 유지, 속성값이 1이상이면 원래 크기에 상관 없이 부모 크기만큼 커진다.

 

* flex shrink : 속성값이 0이면 부모의 크기가 작아져도 원래대로 유지, 속성값이 1이상이면 부모의 크기가 작아질 때 크기에 맞게 줄어든다.

 

* flex-basis : 기본 크기를 결정한다. px, %, em, rem 등 모든 단위를 속성값에 사용하며 크기가 단위에 맞게 고정됩니다. 가지고 있는 크기를 계속 유지하려면 auto 선언

display: -ms-flexbox;
display: -webkit-box;
display: flex;

-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;   

-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;     

-ms-flex-wrap: wrap;
flex-wrap: wrap;

-ms-flex-positive: 1;
flex-grow: 1;

-ms-flex-negative: 1;
flex-shrink: 1;

-ms-flex-preferred-size: auto;
flex-basis: auto;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;

-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;

-webkit-box-orient: vertical;
-ms-flex-direction: column;
flex-direction: column;

-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;

-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;

-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;

-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;

-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;

-ms-flex-pack: distribute;
justify-content: space-around;

-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;

-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;

-webkit-box-pack: right;
-ms-flex-pack: right;
justify-content: right;

-webkit-box-pack: left;
-ms-flex-pack: left;
justify-content: left;

-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;​