우리는 항상 Flexbox의 성장 - 수축 규칙을 논의한다. 예를 들어 flex-grow과justify/align-content/items, 그 작업 원리는 CSS 격자에 도입된 fr 단원과 기본적으로 같다.Flexbox에 익숙한 개발자에게는 fr에 대한 소개지만 사실은 그렇지 않다.때로는 미묘하지만 매우 중요한 차이가 나타난다.

장면: 한 줄에 세 개의 크기가 다른 텍스트 항목이 있습니다

나에게 장면을 하나 쓰라고 했는데, 나는 이렇게 하는 것을 좋아한다.이것은 내가 자주 만나는 일반적인 장면의 구체적인 사례이다. 이것은 흔히 볼 수 있는 좌절이다. CSS 격자를 통해 교묘하게 해결했다.
만약 우리가 텍스트 탭, 단추, 이미지 등 세 개의 내연 요소가 있다면, 그것들의 크기가 다르기 때문에, 한 줄에 가지런히 표시해야 한다.우리는 첫 번째 라벨이 왼쪽으로 정렬되고, 마지막 오른쪽으로 정렬되고, 중간에 하나가 페이지에서 가운데로 정렬되기를 바란다.
이것은 예이다. 내가 대학에 다닐 때의 오래된 주말 프로젝트이다. (나는 이후의 글에서 이 프로젝트를 더욱 광범위하게 토론하고 싶지만, 이것은 주제와 무관하다.)이 프로젝트는 HTML5<canvas> 요소의 실험으로 키보드와 마우스가 상호작용하는 요소를 가지고 있다.세 개의 주요 컨트롤이 있고 캔버스 위에 세 개의 텍스트 탭이 있습니다.

그게 목표야.가장 중요한 요구는 중간 항목이 반드시 페이지 중심에 있어야 한다는 것이다. 그 중에서 중심선은 페이지 중심선과 일치해야 하기 때문에 문제를 초래할 것이다.(일부 경우 페이지는 컨테이너에 불과하지만 페이지는 더 쉽게 보여줍니다.)나는 유용한 시각적 표지를 제공하기 위해 라벨 위에 제목을 추가했다.

노파의 쿨

대학으로 돌아가서 2012년 flexbox가 발표되기 전에 저는 매우 취약한 HTML+CSS로 이 문제를 해결했습니다. 이런 HTML+CSS는 절대적인 포지셔닝을 많이 사용했습니다.
나는 중간 요소와 같은 줄에 있고 왼쪽이나 오른쪽에 고정되도록 첫 번째와 마지막 라벨을 완전히 포지셔닝했다.이것작품은 물론 주변 구조의 일부 변경에 의해 끊어질 수 있다. 매우 반응성이 없고 읽을 수 없고 유연하지 않다. 네 번째 컨트롤을 추가하려면 모든 것이 더욱 복잡해진다.

Flexbox 회사

만약 우리가 현대 CSS로 이 글을 쓰려고 한다면, 첫 번째 생각은 아마도 Flexbox를 사용하는 것이다.이것은 당연히 나의 첫 번째 생각이다.이것은 일차 레이아웃 상황으로 이것은 Flexbox가 가장 잘하는 것이다.그리고 나는 두 줄의 CSS로 이 점을 실현할 수 있다고 확신한다.

#controls-body {
    display: flex;
    justify-content: space-between;
}

완성!정당하다
... 아니.
비록 우리는 세 개의 항목이 있는데, 하나는 왼쪽으로 당기고, 다른 하나는 오른쪽으로 당기고, 다른 하나는 그것들 사이에서 움직이지만, 너는 반드시 중간의 항목이 정확하게 중간에 있지 않은 것을 즉시 보아야 한다.즉, 페이지에서 가운데가 아니라 다른 항목 사이에서 가운데가 된다는 것이다.만약 말단의 항목이 항상 같은 크기라면, 이것은 매우 좋을 것이다. 그러나 그렇지 않으면 안 된다.
부모 레벨에서 justify-contents 을 사용하지 말고 모든 열 flex-grow: 1 을 제시한 다음 각 열에 text-align 규칙을 추가하십시오.그러나 이것은 완전히 같은 시각적 효과를 가지고 있음을 증명한다.
왜 이런 것들은 작용하지 않습니까?네, 곧 시작할게요.우선, 우리는 몇 가지 효과적인 방법을 보았다.

격자

두 번째 Flexbox 시도에서 직감을 얻어 각 내연 항목에 자신의 열을 부여하고 이 열을 같은 크기로 만든 다음 CSS 격자로 변환합니다. 거기서 인용부호를 삭제할 수 있습니다. 격자에서 각 항목에 열을 정의하고 격자에 도입된 fr 단원을 사용하여 같은 크기를 제공합니다.
이 점을 할 수 있는 두 가지 방법이 있다.가장 뚜렷한 것은 세 개의 현식 열을 정의하는 것이다.

#controls-body {
    grid-template-columns: 1fr 1fr 1fr;
}

예쁘고 깨끗해요.그러나 나는 미래에 나의 코드를 검증하는 것을 좋아한다. 만약 그것이 너무 많은 업무나 복잡성을 증가시키지 않는다면.따라서 나중에 프레젠테이션에 더 많은 컨트롤을 추가하지 않도록 Grid의 자동 흐름 규칙을 사용하여 열 그룹을 명시적으로 정의하는 것이 좋습니다.

#controls-body {
    grid-auto-flow: columns;  /* automatically place new items in new columns */
    grid-auto-columns: 1fr;   /* auto-columns should be 1fr wide */
}

이러한 규칙을 상기 text-align 규칙과 결합하면 우리는 우승자를 얻을 수 있다.
따라서 31fr열이 있는 격자는 작동할 수 있지만, 3flex-grow: 1개 항목이나 justify-content: space-between개 항목이 있는 flex 용기는 작동할 수 없습니다. 왜요?무슨 차이가 있습니까?

구별

일이 이렇다.우리는 Flexbox의 flexy'균등한 분포 공간'규칙, 예를 들어 flex-grow과justify-content: space-between를 자주 토론한다. 왜냐하면 그들은 실제로 CSS 격자에 도입된 fr 단원과 같기 때문이다.Flexbox에 익숙하지만 격자에 익숙하지 않은 개발자에게 이것은 fr의 직관적인 해석이지만 사실은 그렇지 않다.때때로 미묘하지만 매우 중요한 차이가 나타나는데, 이것은 이곳의 차이를 설명할 것이다.
Flexbox에서 space-between, flex-grow 등. 모든 항목을 이 구역에 배치한 후 나머지 공간을 분할합니다.따라서 만약에 용기와 100px, 우리가 여기서 한 것처럼 세 가지 사이즈의 항목justify-content: space-between, 10px, 40px이 있다면 Flexbox는 다음과 같은 계산을 할 것이다(대략).

remainder = available space - total used space
          = 100px - (10px + 20px + 40px) = 100px - 70px
          = 30px
space between items = remainder / (# children - 1)
                    = 30px / (3-1) = 30px / 2
                    = 15px

생성된 레이아웃은 다음과 같습니다.

10px item | 15px space | 40px item | 15px space | 20px item

문제는 스트라이크를 유지하지 않았다는 것이다.40px 프로젝트의 중심점은 20px, 즉 10px + 15px + (40px/2 = 20px)에 있다.따라서 용기의 실제 중심 45px 에서 5개의 픽셀이 있다.
전력망의 50px 단원은 다르다.격자 항목의 크기를 고려하기 전에, 격자 항목에 지정된 총 공간을 표시합니다.따라서 fr 용기를 100px 를 포함하는 격자 용기로 설정하면 격자 항목의 내용을 고려하기 전에 다음과 같이 계산됩니다.

remainder = available space - (fixed size column widths)
          = 100px - 0
          = 100px
pixels per fr = remainder / (how many frs used across all column widths)
              = 100px / (1fr + 1fr + 1fr) = 100px / 3
              = 33.333px

So each `1fr` column gets 33.333px, an even third of the space. This means the center of the second column will fall at `33.333px + (half of 33.333px = 16.667px)`, which is a nice round `50px`!

> One very important thing that I totally didn't explain up there is the `fixed size column widths` variable, which in our case is `0`. This is the sum of any columns with values defined in a fixed unit, like `px`, `rem`, `in` (yeah, you can use inches in CSS! Nice for print layouts), or even `%`, which is fixed for the current size of the browser window. So for example if we used the rule `grid-template-columns: 30px 1fr 1fr`, then the calculation changes to this:
>```

python
remainder = available space - (fixed size column widths)
          = 100px - 30px
          = 70px
pixels per fr = remainder / (how many frs used across all column widths)
              = 70px / (1fr + 1fr) = 70px / 2
              = 35px

So in this case, each 1fr column gets 35px.

결론

Flexbox의 작업 원리에 대해 더 많이 알게 되고, 여전히 격자를 다시 고려해야 한다고 고집하는 사람들에게 이유를 줄 수 있기를 바란다.나를 놀라게 한 것은, 나는 여전히 많은 사람들이 그물에 대해 깊은 의심을 표시하는 것을 만났다는 것이다.
마지막으로, 나는 분명히 하고 싶다. 나는 grid-template-columns: 1fr 1fr 1fr 단원이 Flexbox보다 낫다고 말하는 것이 아니다.어떤 경우에는 Flexbox의 동작이 바로 당신이 원하는 것입니다.많은 경우 형제자매 간에 남은 공간을 고르게 분배하는 것이 그들을 같은 공간에 앉히는 것보다 더 중요하다.Flexbox는 또한 용기 기반 프로젝트의 성장과 수축("flex")을 더욱 복잡하게 할 수 있습니다.아마도 나는 언젠가 이것에 관한 문장을 한 편 쓸 것이다.어쨌든, 나의 여기서 관점은 Grid의 fr 단원이 Flexbox보다 낫다는 것이 아니라, 단지 이 특정한 상황에서 그것들이 더욱 쉽다는 것이다.저는 여전히 Flexbox를 좋아합니다.💕💕💕

꼬리표: 표

한숨 쉬다그래, 그래, 알아: 너는 책상으로 해도 돼.실제로 매우 깨끗합니다. 특히 실제 시계가 아닌 CSS 시계를 사용한다면:

css
#controls-body {
  width: 100%;
  display: table;
  table-layout: fixed;
}
p {
  display: table-cell;
}

게다가 fr 규칙은 우리가 또 다른 승자를 얻었다.
솔직히 2012년에 이것은 나에게 더 좋은 해결 방안이었다. 설령 내가 실제 시계를 사용해야 한다고 해도 브라우저가 CSS 시계에 대한 지원이 제한되어 있기 때문이다.
하지만 그게 내 가장 큰 문제야.'영원히 표를 사용하여 레이아웃하지 마라'는 것은 항상 반복되고 거의 설명하지 않는 지혜가 아니다. (비록, 지금 우리는 격자가 생겼고, 영원히 표를 사용하여 레이아웃하지 마라.)예비 격자 환경에서 이것은 확실히 충분한 해결 방안이다.그것은 깨끗하고 튼튼해서 추가 항목을 처리할 수 있으며, CSS 테이블이 무엇인지 알면 코드를 읽을 수 있습니다.
아니오, 제 문제는 반응 능력이라는 단어에서 왔습니다.응답 능력이 없기 때문에, 특히 HTML 테이블의 CSS 테이블도 크게 개선되지 않았다.물론 항목을 이동 보기의 단일 열에 넣을 수 있습니다.그러나 4열이 있고 중간 범위에서 2x2 레이아웃을 사용하고자 한다고 가정하십시오.당신은 책상을 어떻게 처리할 것입니까?절대 포지셔닝에 다시 빠지지 않는 악작극은 어려울 것이다.
나는 이것이 불가능하다고 말하지 않을 것이다.나는 이미 몇 가지 선택을 생각했지만, 그것들은 결코 예쁘지 않을 뿐만 아니라, 모두 결점이 있다.가장 중요한 것은 대다수 (전부가 아니라면) 가 현재 항수에 특정되어 코드를 취약하게 만든다.
다른 한편, 전기망의 응답 속도는 놀랍다.격자의 줄과 열을 재정의하거나 다른 방식으로 내용을 격자에 놓는 것은 간단하기 때문에 적어도 미디어 조회의 단점은 매우 쉽다.(나는 격자 구역에 관한 글을 썼는데, 이것은 단점을 더욱 유용하게 하는 특성이다.)그러나 많은 상황에서 단점은 불필요한 것이다.Grid는 응답성을 고려하여 처음부터 구축되었고 text-align 및 repeat(auto-fill, ...) 등 많은 기능을 지원합니다.
이 모든 것에 대한 더 많은 정보는 Rachel Andrewgridbyexample.com와 Jen Simmons를 볼 것을 강력히 건의합니다.