신축성 레이아웃 flex 호환 쓰기

브라우저 버전 호환

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

브라우저의 최신 flexbox 사양 지원:

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

4

Safari 6.1+(접두사-webkit-)

Android 4.4+

4

iOS 7.1+(접두사-webkit-)

신축성 레이아웃 상자 정의하기
display
display: -webkit-box;/
구버전: Safari, iOS, Android browser, older WebKit browsers./
display: -moz-box;/
구버전: Firefox/
display: -ms-flexbox;/
혼합 버전 구문: IE 10/
display: -webkit-flex;/
새 버전 구문: Chrome 21+/
display: flex;/
새 버전 구문: Opera 12.1, Firefox 22+/

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

하위 요소 정렬 정의
flex-direction

    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;

가로 배치
justify-content

　　-webkit-justify-content:center;
　　justify-content:center;
　　-moz-box-pack:center;
　　-webkit--moz-box-pack:center;
　　box-pack:center;

세로 배치
align-items

　　align-items:center;
　　-webkit-align-items:center;
　　box-align:center;
　　-moz-box-align:center;
　　-webkit-box-align:center;

신축 박스 레이아웃 호환
flex

　  box-flex:num;
　　-webkit-box-flex:num;
　　-moz-box-flex:num;
　　flex:num;
　　-webkit-flex:num;

한데 모으다

/* flex              
 *    
 * display__flex
 * flex_direction__column
 * flex_wrap__wrap
 * justify_content__center
 * justify_content__space_between
 * justify_content__space_around
 * align_items__center
 * flex_grow__1
 * flex_shrink__0
*/

/*
               
*/
.display__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*flex-direction         （        ）。*/
.flex_direction__row_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex_direction__column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex_direction__column_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*     ，        （  "  "） 。flex-wrap    ，         ，    。*/
.flex_wrap__nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex_wrap__wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex_wrap__wrap_reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/*justify-content                。*/
.justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify_content__flex_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify_content__center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify_content__space_around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/*align-items               。*/
.align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align_items__flex_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align_items__center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.align_items__baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*align-content              。          ，       。*/
.align_content__flex_start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.align_content__flex_end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.align_content__center {
    -ms-flex-line-pack: center;
    align-content: center;
}
.align_content__space_between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.align_content__space_around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*
               
*/

/*order           。    ，     ，   0。           ，          。*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-grow           ，   0，         ，    。           ，          。*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrink            ，   1，       ，      。           ，          。*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basis              ，         （main size）。         ，           。      auto，        。
               ，          。
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-self                      ，   align-items  。    auto，        align-items  ，       ，    stretch。*/
.align_self__flex_start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align_self__flex_end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align_self__center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align_self__baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

safari
부모 요소는 display:flex로 설정합니다.문제 없지만, 하위 요소 flex:1 이런 표시는safari에서 사용할 수 없습니다!하위 요소는 flex:auto로만 설정할 수 있습니다. flex:1의 효과를 실현하려면 다음을 사용하십시오.

flex-grow:1;
flex-shrink:1;
flex-basis:0;

이 세 개의 분리된 요소가 대체되고 flex 속성은 바로 위의 세 가지 속성의 복합 약자이다.