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

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

---

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

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

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

---

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

Paul Irish의 인용문

경고 : Flexbox는 몇 가지 주요 수정 작업을 거쳤으므로이 문서는 오래되었습니다. 요약하면 이 기사의 기반이되는 이전 표준 (Flexbox 2009) 은 v4 이후 Chrome, v2 이후 Firefox 및 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 를 사용 하는 방법에 대해 설명합니다 .

---

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

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

---

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

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

참고 URL : https://stackoverflow.com/questions/16280040/css3-flexbox-display-box-vs-flexbox-vs-flex