CSS3 플렉스 박스 : 디스플레이 : 박스 vs. 플렉스 박스 vs. 플렉스

어제 학교에서 CSS 3 flexbox 문을 사용하는 웹 사이트를 얻었습니다. 나는 전에 그것을 사용하지 않았습니다. 그래서 나는 그것을 조금 훑어 보았고 flexbox 문장의 많은 다른 스타일을 발견했습니다.

어떤 사람은 글을 쓰고 display: box;, 어떤 사람은 사용 display: flexbox;하고, 다른 사람도 display: flex;있습니다.

그렇다면 차이점은 무엇입니까? 어느 것을 사용해야합니까?

css flexbox

— 피터 모텐슨
소스

정확한 중복 : stackoverflow.com/questions/15662578/…

— cimmanon 2013

하지만 어느 쪽이 먼저 받아 들여지는 대답을 얻을 것인가 ... 나는 당신의 베팅 @cimmanon을 헤지하고 둘 다에 대한 대답을 게시 할 것입니다!

— andyb 2013-04-29

어느 쪽이 닫혀 있는지는 중요하지 않습니다. 새로운 질문에 더 나은 답변이있는 경우 이전 질문을 닫을 수 있습니다. 나는 "질문과 대답"으로 동시에 게시 된 이전 질문은 절대로 받아 들여지지 않거나 OP가 그들 자신의 대답을 받아 들일 것이라고 추측합니다. 내가 말했듯이, 나는 여기에 당신의 대답을 복제하고 OP가 대답을 받아 들인다는 가정하에,이 대답의 복제물로 오래된 것을 닫도록 투표 할 것입니다 :-)

— andyb

@andyb : 여기에 더 나은 링크와 해결책이 모두 있습니다. 그래서 제 질문은 중복이더라도 닫히면 안됩니다.

@andyb : 아! 나는 그것을 어떻게 든 놓쳤다. 곧 보겠습니다. 감사.

— BoltClock

답변:

154

이것들은 다른 스타일입니다.
display: box;2009 년
display: flexbox;버전입니다. 2011 년 버전입니다.
display: flex;실제 버전입니다.

Paul Irish의 인용문

경고 : Flexbox는 몇 가지 주요 수정 작업을 거쳤으므로이 문서는 오래되었습니다. 요약하면 이 기사의 기반이되는 이전 표준 (Flexbox 2009) 은 Chrome v4 이후, Firefox 이후 v2 및 IE10 베타에서 구현되었습니다.

그 이후로 새로운 flexbox 표준 이 데뷔하여 Chrome 17에서 데뷔하기 시작했습니다. Stephan Hay는 새로운 flexbox 구현에 대한 가이드를 작성했습니다 . 그 이후로 사양은 Chrome 21에 도입되기 시작한 이름 지정 변경을 거쳤습니다. Chrome 22는 최신 사양을 안정적으로 구현했습니다.

이 시점에서 둘 중 하나 를 구현 하는 데는 위험 이 있으므로주의해야합니다.

다음 은 다양한 flexbox 문에 대한 블로그입니다.
이것은 다른 버전에 대한 css-tricks의 블로그 항목입니다.

flexbox를 사용할 때 항상 다음과 같이 작성합니다.

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

편집 :
여전히 모든 사람이 플렉스 박스 레이아웃을 볼 수있는 브라우저 / 장치를 가지고있는 것은 아닙니다. 따라서 대체 솔루션 또는 대안 에 대해 Kenan Yusuf 의이 기사 에서 flexbox를 사용하지 않고 flexbox 를 사용 하는 방법에 대해 설명합니다 .

— 마이클 슈미트
소스

선언의 순서가 중요해 보입니다. 나는 -webkit-box 만 지원하는 오래된 Android 크롬에서 작업 중이었습니다.이 선언은 마지막에 있어야 효과적입니다. 누구도 이것을 경험합니까?

— ken

@Ken No, -webkit-box먼저 온다. 마지막 선언은 항상 최신 또는 W3C 표준이어야합니다. 그러나 나는 권하고 싶습니다 -ms-flexbox이후 -webkit-flex때문에 IE12 / 에지 지원을 -webkit-flex하지만 기술적으로 IE가 제대로 사용하려면 -ms-대신 접두사 -webkit-. 디스플레이로서 일반적인주의 사항입니다 : flex; 여기서는 IE12의 영향을받지 않습니다.

— hexalys

사양은 많은 반복을 거쳤습니다. 2009 , 2012 , 2013 및 값이 변경 될 때마다 참조하십시오 . display: flex;최신입니다.

여전히 초안 사양이므로 현재 구현은 여전히 변경 될 수 있습니다.

— 앤디
소스

디스플레이 : 플렉스; 현재 우리 코드에서 사용할 수있는 최신 버전입니다.

그래서 그것을 위해 가십시오.

— 조니
소스