구형 플렉스 박스에서 새로운 플렉스 박스로 전환하는 방법은 무엇입니까?

Question

나는 오래된 "박스"속성 (-webkit-box, etc)을 사용하는 구형의 신축성있는 구문을 배우고있다. 새로운 flex 모델로 전환하는 가장 좋은 방법은 무엇입니까? 전환과 함께 차트 또는 무언가가 있습니까, 아니면 내가 완전히 새로운 것처럼 그것을 배워야합니까?

Answer 1

나는 좋은 도표가 없다, 미안하지만, 나는 그것이 정말로 도움이 될 것이라고 동의한다! 당신은 아마도 새로운 모델을 처음부터 배울 필요가 있지만 이전 모델에 대한 당신의 지식이 많은 도움이 될 것입니다.

필자가 아는 한 현대의 flexbox는 기존의 "상자"모델의 수퍼 세트이기 때문에 쉽게 전환 할 수 있습니다.

역방향으로 작업 할 경우 "Pleeease Play"과 같은 자동 접두사 도구를 사용하면 이전 구문을 최신 상태로 유지하는 방법을 배울 수 있습니다. 예를 들어

,이 "새로운"구문에 연결하면 :

/* new syntax */ 
.container { 
    display: flex; 
} 
.element { 
    flex: 1 0 auto; 
    flex-direction: column; 
} 

은 ... 도구는 당신을 위해 이전 box 속성을 생성합니다. (나는 명확성을 위해 "새로운 구문"속성을 삭제했습니다)

/* old syntax */ 
.container { 
    display: -webkit-box; 
} 
.element { 
    -webkit-box-flex: 1; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
} 

새로운 구문이 훨씬 더 강력하다 : 예를 들어 flex 속성이 이전 -webkit-box 속성을 대체뿐만 아니라 flex-shrink 및 flex-basis의 약어입니다. flex-wrap과 같은 더 많은 새로운 속성도 있습니다. 이 예에서는 브라우저 프리픽스 인 -webkit과 -ms을 포함 시켰지만 지원해야하는 브라우저에 따라 브라우저 프리픽스를 남겨 둘 수 있습니다.