css3 flex-box와 관련하여 올바른 브라우저는 무엇입니까?

Question

css3 플렉스 박스를 실험 한 결과, Chrome과 Firefox에서 약간의 차이가 있음을 빠르게 알게되었습니다.

특히 : 플렉스되어야하는 요소에 너비를 설정하면 파이어 폭스는 요소를 필요한만큼 굴곡시키고 너비 스타일은 고려하지만 변수 만 사용합니다. 상자 안에 2 명 div의이 같은 폭이 할당 된 경우

<div id="box"> 
    <div class="flex-box">Test</div> 
    <div class="flex-box">Test Text</div> 
</div> 

은 크롬 그들을 같은 크기 것 :

크롬은 완전히 스타일로

예를 존중합니다. 파이어 폭스는 두 번째 div가 더 많은 공간을 필요로한다는 것을 재확인 할 것이고, 따라서 더 많은 할당을 받게된다.

누가 맞습니까?

Answer 1

폭에 적용되지 않습니다 플렉스 기억, 그것은 여유 공간에 적용됩니다. 이렇게되면 여러 가지 일반적인 경우에 반 직관적 인 결과가 발생합니다 (as has been pointed out on the www-style mailing list). CSS를 다시 주문하거나 멀티 라인 (아직 Firefox 및 Chrome에서 구현되지 않음)을 원하지 않는 한 display: box 및 box-flex을 사용하려는 경우 display: table을 사용하고 싶습니다. display: table-cell.

실제 질문으로 돌아 가기 : set a width in pixels 일 경우 Firefox와 Chrome이 동일하게 표시되지만, 사용자가 set a width as a percentage 인 경우에는 표시되지 않습니다. 지금까지 어느 브라우저가 제대로 작동하고 있는지에 관해서는 파이어 폭스가 원래 사양에서 의도 한대로 XUL 속성이 무엇을 설명 하는지를 구현하는 것이 합리적이며, XUL 속성은이 모든 것을 기반으로합니다. 다른 사람들이 언급했듯이 최종 스펙이이 원래의 의도와 일치하는지 여부는 알 수 없습니다.

Answer 2

flexbox는 아직 작동 초안이므로 어떤 브라우저가 옳고 그른 것 같지 않습니다. 사양에 따라 언제든지 다른 브라우저를 변경하고 렌더링 할 수 있습니다. 최소 고유 폭이 결정 된 후

http://www.w3.org/TR/css3-flexbox/

Answer 3

robertc의 진술에 동의하지 않습니다. "하지만 실제 질문으로 돌아 가기 : 너비를 픽셀로 설정하면 Firefox와 Chrome이 동일하게 표시되지만 너비를 백분율로 설정하면 안됩니다."

저는 현재 상당히 복잡한 JS 및 CSS 사이트를 매우 간단한 HTML/CSS3 사이트로 변환하는 것이 얼마나 쉬운지를 보여주기 위해 flexbox를 사용하고 있습니다. 결론하면 I 픽셀의 설정 폭에 관하여 서 가지고

크롬에서

#main { 
    display: box; 
} 

#main > section { 
    width: 120px; 
    padding: 10px; 
    border: 5px solid #000; 
} 

전체 폭 = + 20 + 10 = 150 픽셀 FF에서 120 전체 폭 = 120 픽셀합니다 (20 픽셀 패딩은 내부에 120 및 10 픽셀 경계도 마찬가지 임)

크롬에서 #main은 욕심이 많으며 기대하는대로 100 % 차지하는 또 다른 불일치를 발견했습니다. Firefox에서 #main을 100 %로 설정해야 예상대로 작동합니다.

아직 지원되는 모든 브라우저에서 모든 차이점을 해결하기 위해 노력하고 있습니다. 추가 할 것이 많으면 게시하려고합니다. 슬프게도, 그는 flexbox 모델만큼이나 차갑고, 많은 똥을 만드는 것처럼 쉽습니다.

크기를 변경하기 위해 CSS 전환을 사용하면 명시 적으로 정의 된 치수 (예 : 픽셀)를 사용하는 것이 효과적이지만 ... 상자의 플렉스에 의해 치수가 정의되는 경우 애니메이션은 플렉스 값 사이를 단순히 이동합니다. 아니 어디 부드러운 (단, 5와 1의 굴곡을 굽히지 않고, 당신은 500과 100의 굴곡을 가질 수 있었다). 실제로 크롬은 플렉스 값 사이에서 움직이지 않고 그냥 점프합니다. FF는 다른 한편으로는 이것을 능숙하게한다.

크롬은 가까워 지지만 FF는 flexbox를 처리하는 방식으로 진행되기를 바라고 있습니다. 일부 처리 방법에 동의하지 않으며 플렉스 값 사이의 애니메이션이 부족합니다.