Flexbox 및 Twitter 부트 스트랩 (또는 유사한 프레임 워크) [닫기]

최근 Flexbox에 가장 높은 div에 따라 div를 같은 높이로 만드는 솔루션을 찾을 때 발견했습니다 .

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

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

그리드 시스템 만 사용할 때 순전히 사용하는 것이 더 똑똑하다고 생각 flexbox하지만 이미 프레임 워크를 사용하고 있다면 flexbox추가 할 수 있는 것은 무엇 입니까?

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

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

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

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

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

편집하다:

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

• display: table부모, 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 를 확인 하십시오 .

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

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

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

CSS 트릭에 대한 다른 기사 를 놓친 것이 두렵습니다 .

참고 : Flexbox 레이아웃은 응용 프로그램의 구성 요소 및 소규모 레이아웃에 가장 적합하지만 Grid 레이아웃은 대규모 레이아웃에 적합합니다.

시도하지 않을 수도 있지만 두 번 생각하는 것만은 아닙니다. 그리고 모든 것은 결국 원하는 브라우저 지원에 달려 있습니다.