html 속성 - 플렉스 박스 대 트위터 부트 스트랩(또는 유사한 프레임 워크)




강좌 사용법 (4)

내가 사용하는 Flexbox havent (나는 그것에 대해 읽고 좋은 것)하지만 난 부트 스트랩 프론트 엔드 dev에있어. 최종 결정을 내리기 전에 Flexbox 인쇄 페이지를 테스트하는 것이 좋습니다. 아시다시피 ... 때로는 인쇄 스타일이 끔찍한 두통이고 인쇄 스타일을 디자인 할 때 부트 스트랩이 많은 도움이됩니다.

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

CSS-tricks.com에서 다음 페이지 를 읽었으며 flexbox 가 배우고 사용할 수있는 매우 강력한 모듈이라는 것을 확신했습니다. 그러나 트위터 부트 스트랩 (그리고 유사한 프레임 워크)이 그리드 시스템과 동일한 기능을 제공한다는 사실을 생각하게했습니다.

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

나는 그리드 시스템만을 위해, flexbox 사용하는 flexbox 더 똑똑하다고 생각하지만, 이미 프레임 워크를 사용하고 있다면, flexbox 추가 할 수있는 것이 있습니까?

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


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

  • 부트 스트랩은 플롯을 사용하여 그리드 시스템을 만듭니다. 많은 사람들은 플렉스 박스가 항목의 크기와 내용에 유연하게 머물러있어 플렉스 박스가 반대되는 경우를 말합니다. 픽셀 대 em / rem을 사용하거나 마진과 패딩 만 사용하여 div를 제어하고 미리 정의 된 크기를 설정하지 않는 것과 같은 차이가 있습니다.

  • 부트 스트랩은 플로트를 사용하기 때문에 각 행 다음에 clearfix가 필요합니다. 그렇지 않으면 높이가 다른 div가 잘못 정렬됩니다. 플렉스 박스는 그렇게하지 않고 컨테이너에서 가장 큰 div를 확인하고 높이를 고수합니다.

플렉스 박스를 통해 부트 스트랩을 사용하는 유일한 이유는 브라우저 지원이 부족하다는 것입니다 (주로 IE) (이미 죽었습니다). 그리고 둘 다 동일한 웹킷 엔진을 사용하더라도 Chrome과 Safari에서 다른 동작을 얻는 경우가 있습니다.

편집하다:

당신이 직면하고있는 유일한 문제가 같은 높이의 열이라면 BTW, 거기에 대한 몇 가지 해결책이 있습니다 :

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

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

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

편집 2 :

또한 플렉스 박스가 작동하는 방법에 대해 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


CSS 트릭에 대한 다른 기사 를 놓친 같습니다.

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

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


당신 말이 맞아요, 그것은 템플릿입니다. HTML5 웹 사이트를 개발하기위한 모범 사례를 모아 놓은 템플릿입니다. 당신은 그것을 사용할 필요는 없지만 수년간 최고의 개발자들에 의해 개발되고 연마 된 견고한 기초 위에서 당신이 안심할 수 있다는 것을 안심할 수 있습니다. 이 프로젝트의 주요 개발자 중 한 명인 폴 아일랜드 (Paul Irish)

"본질적으로 html과 css의 좋은 시작 템플릿이며 작동하는 폴더 구조입니다.하지만 구식은 프론트 엔드 개발 전문가의 수년간의 우수 사례입니다."

보일러 플레이트의 전체 주석 버전을 다운로드하고 코드를 통해 독서에 대한 아이디어를 얻고 코드를 읽는 것이 좋습니다. (사이트에서 사용해야하는 상용구의 코드 스 니펫을 강조한 이 기사 를 참조하십시오.) 이것들은 프로젝트의 시작점으로 사용할지 여부를 결정하는 데 도움이됩니다.

initializr 은 부트 스트랩 옵션을 포함하기 때문에 실제로 더 쉬울 수 없습니다!





html css twitter-bootstrap flexbox