flexbox 및 wrap 속성

저는 phonegap으로 앱을 개발하고 있습니다. 필자는 메인 어플리케이션 영역의 일부 버튼을 레이아웃하기 위해 flexbox를 사용하고자했습니다.flexbox 및 wrap 속성

누군가가 왜이 http://jsfiddle.net/apYLB/이 최신 크롬에 요소를 포함하지 않는지 설명 할 수 있습니까?

HTML :

<div class="flex-container"> 
    <div class="flex-item">1</div> 
    <div class="flex-item">2</div> 
    <div class="flex-item">3</div> 
    <div class="flex-item">4</div> 
    <div class="flex-item">5</div> 
    <div class="flex-item">6</div> 
</div>

CSS :

.flex-container { 
    display: -webkit-box; 
    display: flex; 
    flex-wrap: wrap; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    -webkit-flex-direction: row; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -webkit-box-align: end; 
    -moz-box-align: end; 
    box-align: end; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 
    justify-content:space-around; 
    height:100%; 
} 
.flex-item { 
    margin:0 10px 25px 0; 
    width:86px; 
    border:1px solid #000; 
} 
.flex-item img { 
    max-height:80px; 
}

그들은 horizzontally 배치되어 만 3 반 상자가 나타납니다.

출처

2013-05-27 gong

다음은 초안의 속성/값을 비교하는 데 유용한 차트입니다. https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon

여기에 꽤 많은 것들이 있습니다. 먼저 기존 속성을 새 속성과 혼합합니다 (display: -webkit-box은 2009 초안이지만, -webkit-flex-flow은 표준 초안에서 가져온 것입니다).

둘째, 2009 Flexbox 구현 중 어느 것도 포장을 활성화하는 데 필요한 box-lines: multiple을 지원하지 않습니다. 슬프게도 거의 모든 모바일 장치는 2009 드래프트 만 지원합니다. 최신 사양을 지원하는 Firefox 버전은 현재 래핑을 지원하지 않습니다 (flex-flow 및 flex-wrap은 지원되는 속성이지만 래핑과 관련된 값은 지원되지 않습니다).

셋째, justify-content: space-around이 있지만 2009 년형은 box-pack: center입니다. 센터는 모든 초안의 중심입니다.

http://cssdeck.com/labs/ccamtvl5

.flex-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -ms-flex-line-pack: end; 
    -webkit-align-content: flex-end; 
    align-content: flex-end; 
    -ms-flex-pack: distribute; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    height: 100%; 
} 
@supports (flex-wrap: wrap) { /* hide from incomplete Firefox versions */ 
    .flex-container { 
    display: flex; 
    } 
}

업데이트 : 포장은 이제 버전 28의 파이어 폭스에서 작동하지만, 현대의 속성 (안 display: -moz-box 같은 기존의 접두어들)을 사용하는 경우에만.

출처

2013-05-27 14:23:14 cimmanon

그래서 android> = 2.3을 타겟팅하기 위해 사용할 수 없습니까? 내가 정말로 원하는 것은 한 행에 3 개의 버튼을, 두 번째 버튼에 나머지 3 개의 버튼을 갖는 것입니다. css2를 float과 center 속성으로 사용할 것을 제안합니까? – gong

슬프게도 그렇습니다. 인라인 블록리스트 요소를 중심으로하는 것은 불완전한 Flexbox 지원을위한 합리적으로 매력적인 대안이다 : http://codepen.io/cimmanon/pen/lBDwu – cimmanon

Upvote 새로운 것을 배웠기 때문에 :'@support'! –

display : -webkit-box;

아마도 -webkit-flex을 의미했을 것입니다.

출처

2013-05-27 13:40:14

flexbox 및 wrap 속성

답변

관련 문제