html - 속성 - flex란




Flexbox 및 Twitter 부트 스트랩(또는 유사한 프레임 워크) (2)

최근에 가장 높은 div에 따라 div를 같은 높이로 만드는 솔루션을 찾고 FlexboxFlexbox 발견 Flexbox .

CSS-tricks.com에서 다음 페이지 를 읽었으며 flexbox 가 배우고 사용하기에 매우 강력한 모듈이라는 것을 확신했습니다. 그러나 Twitter Bootstrap (및 유사한 프레임 워크)이 그리드 시스템과 동일한 기능 (물론 + 추가 기능)을 제공한다는 사실에 대해서도 생각하게되었습니다.

이제 질문은 다음과 같습니다. flexbox 장단점은 flexbox 입니까? Flexbox로 Bootstrap과 같은 프레임 워크로 할 수없는 일이 있습니까 (물론 순수한 그리드 시스템에 대해 이야기하고 있습니까)? 웹 사이트에서 구현할 때 어느 것이 더 빠릅니까?

그리드 시스템 만 사용할 flexbox 순전히 flexbox 사용하는 flexbox 더 똑똑하다고 flexbox . 그러나 이미 프레임 워크를 사용하고 있다면 flexbox 가 추가 할 수있는 것이 있습니까?

프레임 워크보다 flexbox 의 "그리드 시스템"을 선택 flexbox 이유가 있습니까?


나는 Flexbox를 사용하지 않았지만 (나는 그것에 대해 읽었으며 훌륭해 보인다) 부트 스트랩 프론트 엔드 개발자이다. 최종 결정을 내리기 전에 Flexbox 인쇄 페이지를 테스트하는 것이 좋습니다. 알다시피 ... 때로는 인쇄 스타일이 끔찍한 문제이며 부트 스트랩은 인쇄 형식을 디자인해야 할 때 많은 도움이됩니다.


몇 가지 이유에서 flexbox는 부트 스트랩보다 훨씬 낫습니다.

  • 부트 스트랩은 플로트를 사용하여 그리드 시스템을 만듭니다. 많은 사람들은 웹에 적합하지 않다고 말합니다. 플렉스 박스는 항목의 크기와 내용에 유연하게 유지함으로써 반대쪽을 수행합니다. 픽셀 대 em / rem을 사용하거나 여백과 패딩 만 사용하여 div를 제어하고 미리 정의 된 크기를 설정하지 않는 것과 같은 차이점.

  • 부트 스트랩은 부동 소수점을 사용하기 때문에 각 행마다 수정이 필요합니다. 그렇지 않으면 높이가 다른 div가 잘못 정렬됩니다. Flex-box는 그렇게하지 않고 대신 컨테이너에서 가장 높은 div를 확인하고 높이를 고수합니다.

flex-box를 통해 부트 스트랩을 사용하는 유일한 이유는 브라우저 지원이 부족하기 때문입니다 (IE 주로) (이미 이미). 때로는 동일한 웹킷 엔진을 사용하더라도 Chrome 및 Safari와는 다른 동작을합니다.

편집하다:

BTW 당신이 직면하는 유일한 문제가 동일한 높이 열이라면, 그에 대한 몇 가지 해결책이 있습니다.

  • 부모의 display: table-cell; , display: table-cell; 사용할 수 있습니다 display: table-cell; 아이에. 디스플레이에서 동일한 높이를 얻는 방법을 참조하십시오 .

  • 각 div에서 절대 위치를 사용할 수 있습니다.
    position: absolute; top: 0; bottom: 0;

  • jquery / JS 솔루션도 있으며 나중에 추가하려고 할 때 기억할 수없는 또 다른 솔루션이 있습니다.

편집 2 :

또한 flex-box의 작동 방식에 대해서는 http://chriswrightdesign.com/experiments/flexbox-adventures/ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties 를 확인 http://chriswrightdesign.com/experiments/flexbox-adventures/ .

편집 3 : https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

편집 4 : https://caniuse.com/#feat=flexbox





flexbox