CSS 격자선 사용 시기 및 Flexbox 사용 시 여러 줄 레이아웃

소개하다.

Flexbox와 CSS Grid는 모두 CSS에 내장된 강력한 레이아웃 기술이다.그들은 많은 중첩 능력을 가지고 있다.대다수의 임무, 예를 들면 수직 가운데에 있는 것을 나는 모두 할 수 있다.어떤 경우, 하나 또는 다른 것이 일을 완성하는 유일한 방법이다.
현재의 네트워크 표준 상황을 고려하면 하나가 다른 것보다 좋습니까?
만약 Grid나 Flexbox가 모두 일을 할 수 있다면, 나는 지금부터 Grid를 사용하기 시작할 것이다.나는 각종 다행장면을 토론한 후에 원인을 설명할 것이다.

흠집

부모 항목이 정의한 대로 하위 항목 사이에 일치하는 간격을 적용하는 통일된 방법이 곧 있을 것이다. gap따라서 gap: 5px는 외부 여백에 영향을 주지 않고 내부 항목 간의 간격에만 영향을 줍니다.
이것은 Gridgrid-gap의 영감을 받아 최종적으로 그것을 대체할 것이다.불행하게도 Firefox를 제외한 모든 브라우저를 사용하여 Flexbox의 다행 (포장) 프로젝트에서 같은 결과를 얻을 수 있는 유일한 방법은 '마이너스 사이드 해커' 이다.모든 자 피쳐에서 얻은 여백은 클리어런스의 절반입니다.그리고 외부의 추가 공간을 고려하기 위해 용기는 같은 값의 경계를 -1로 곱한다.한 줄 (비포장 부드러운 용기) 만 있을 때, 프로젝트에서 :first-child 과 :last-child 을 사용해서 추가 공간을 설명할 수 있습니다.
다행 격자 용기에 대해서는 grid-gap만 적용하면 된다.
승자: Grid, 그러나 flex 레이아웃gap은 곧 크롬과 사파리에 추가될 전망이다.

일관된 크기 조정 및 자동 크기 조정

두 방향 모두 궤적(여러 열 여러 줄 레이아웃)이 있는 경우 다른 항목에 대한 자 피쳐의 너비에 따라 선택이 달라집니다.
모든 항목을 고르게 배열하고 수직으로 쌓으려면 격자를 사용하십시오.

항목이 수직이 아닌 자연적인 폭을 유지하려면 Flexbox를 사용하십시오.

격자 코드는 용기의 repeat() 속성에 grid-template-columns 함수를 정의해야 한다.repeat 함수는 두 개의 값을 받아들인다.우리의 첫 번째 목표는 auto-fill 또는 auto-fit이다.두 번째는 minmax 함수로 고정 단위의 값과 다른 고정 또는 상대 값을 받아들인다.
전반적으로 말하면 다음과 같다.

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

이것은 모든 항목의 기본 너비를 200px로 하고 필요에 따라 확대할 수 있다.
Flexbox의 경우 flex-wrap: wrap만 추가하면 됩니다.
이긴 사람: 용례에 따라 다르지만, Flexbox는 훨씬 간단합니다.🙃

용기 제어와 물품 제어

두 어셈블리 사이의 경계와 같은 경우에 부모 컨테이너의 CSS 또는 하위 컨테이너의 CSS만 수정할 수 있습니다.
부모 요소를 제어할 수 있는 경우 Grid를 사용하여 grid-template-* 및 grid-auto-*를 사용하여 서브 요소를 정의합니다.
하위 요소를 제어할 수 있으면 Flexbox를 사용하여 하위 요소가 자신의 요소를 정의합니다flex-basis.
다른 이유로 Flexbox를 사용해야 한다면, 부모 대상에 CSS 변수를 정의할 수 있습니다. 이 변수는 하위 대상에서 계승됩니다.
승자: 용례에 따라 다르지만 플렉스박스의 다기능성은 점수를 받았다.개인적으로 나는 가능한 한 한 한 한 곳에서 아버지 대상의 모든 항목을 통제하는 것을 좋아하기 때문에 Grid도 하나의 점수를 얻었다.

내포된 레이아웃

Firefox의 유일한 슬레이어드 CSS 그리드 기능은subgrid입니다.이렇게 하면 톱 레벨 모 피쳐와 동일한 궤적 정의에 따라 자식 격자선 항목을 정의할 수 있습니다.

항목 세트가 내부에서 가변 내부 용량이 있는 위쪽과 아래쪽 부분으로 분할된 경우 위쪽에서 두 개의 반복auto 메쉬 궤적을 정의할 수 있습니다.그런 다음 중간 레벨의 자 피쳐가 각 반복 행에서 두 위치를 차지합니다.그리고 맨 위에는 auto 궤적을 받고, 밑에는 다른 궤적을 받도록 궤적 정의를 전달한다.이제 모든 항목에서 세분화가 같은 위치에 있으므로 세분화는 내부에서 정렬됩니다.
승자: Grid, 그러나 Firefox를 제외한 모든 브라우저에서 고르지 않은 레이아웃이 있습니다.

결론

대부분의 다른 용례, 특히 한 방향에서 하나의 궤도를 사용하고 프로젝트 사이에 간격이 없을 때 나는 이 두 가지 방법을 기꺼이 사용할 것이다.이것은 수직 가운데와 상대적인 크기가 필요한 경우에 적합하다.
그러나 나는 부모 원소의 한 위치에서 하위 원소를 정의할 때 하위 원소가 어떻게 배치되어야 하는지를 추리하기 쉽다는 것을 발견했다. 그래서 격자는 대부분의 상황에서 승리자이다.
챔피언: 격자, 하지만 한계를 알아야 해!
내가 언급한 바와 같이 Firefox는 이 방면에서 선두를 달리고 있다.부탁⭐️/Chromium과 WebKit에서 이러한 문제에 관심을 가지면 Flexbox와 Grid가 미래에 더욱 강해질 것이다!

gapFlexbox(크롬): https://bugs.chromium.org/p/chromium/issues/detail?id=762679

gapFlexbox(WebKit)용: https://bugs.webkit.org/show_bug.cgi?id=206767

subgrid(크롬): https://bugs.chromium.org/p/chromium/issues/detail?id=618969

subgrid(WebKit):https://bugs.webkit.org/show_bug.cgi?id=202115