어셈블리에 대한 API:flexbox 레이아웃 만들기

너는 몇 번display: flex을 썼니?이러한 상황은 매우 보편적이어서 display: flex를 페이지의 거의 모든 요소에 적용하려고 시도한다.
이 기사에서는 API 결정 뒤에 자주 사용되는 구성 요소에 대한 사고 과정을 다룹니다.
나는 줄곧 이 글을 쓰는 것을 고려하고 있다. 왜냐하면 나는 flexbox 구성 요소의 서로 다른 실현을 계속 보았기 때문에 각각 자신의 API가 있기 때문이다.나는 우리가 발명을 멈추고 그것을 표준화해야 한다고 생각한다.

xkcd: 표준(https://xkcd.com/927/)

출발점

본문에서, 나는 React와stitches를 사용할 것이다. (나는 그것을 매우 좋아한다.)그러나 본고의 주요 사상은 API 결정의 합리성을 증명하는 것이다. 이런 결정은 Vue, Svelte,Lit 또는 그 어떠한 전단 도구에도 응용될 수 있다.
간단히 시작하겠습니다.

import { styled } from '@stitches/react'

export const Flex = styled('div', {
  display: 'flex',
})

간단하게 보기 위해서 저는 styled에서 미리 설정stitches을 직접 사용하지만 라이브러리에서 일치하는 레이아웃 속성, 색깔, 글꼴 크기 등을 얻기 위해 theme tokens을 사용하도록 권장합니다.

포장하다

간단함부터 시작하여 flex-wrap 컨트롤을 추가합니다.

import { styled } from '@stitches/react'

export const Flex = styled('div', {
  display: 'flex',
  variants: {
    wrap: {
      'wrap': {
        flexWrap: 'wrap',
      },
      'no-wrap': {
        flexWrap: 'nowrap',
      },
      'wrap-reverse': {
        flexWrap: 'wrap-reverse',
      },
    },
  },
})

stitches variants를 사용하여 Flex 구성 요소에 예쁜 타자 스크립트 도구를 생성하고 있습니다
이것은 가장 간단한 API 결정입니다. 우리는 flex 단어만 삭제하여 중복을 피합니다. 왜냐하면 모든 도구가 Flex 요소의 상하문에 존재하기 때문입니다.기본 브라우저 값은 nowrap이므로 <Flex wrap="wrap">를 사용하는 것이 일반적일 수 있음을 기억하십시오.이상하게 느껴질 수도 있지만 허구의 API보다 학습과 사용이 쉽다(예를 들어flex-wrap: wrap.

흐름 방향

두 번째 아이템으로 넘어가겠습니다. flex-direction.
나는 direction가 일부 디자인 시스템에서 사용되는 것을 본 적이 있지만, 일부 사람들에게는 쓰기cosnt보다 더 나쁘다. 특히 이것은 자주 사용하는 도구이기 때문이다.
기타 설계 시스템에는 Row 및 Column 구성 요소가 포함됩니다. 이 구성 요소들은 소비자에게 좋은 환경을 제공합니다.

// Flex defined as before

export const Row = styled(Flex, {
  flexDirection: 'row',
})

export const Column = styled(Flex, {
  flexDirection: 'column'
})

현재 우리는 flex-direction: row-reverse; // or column-reverse를 사용해야 할 때 이런 상황을 처리해야 한다.따라서 우리는 reverse 부울 속성을 추가하거나 (자주 사용하는 속성이 아니기 때문에)

// Flex defined as before

export const Row = styled(Flex, {
  flexDirection: 'row',
  variants: {
    reverse: {
      true: {
        flexDirection: 'row-reverse'
      }
    }
  }
})

export const Column = styled(Flex, {
  flexDirection: 'column',
  variants: {
    reverse: {
      true: { // neat way to create boolean variants in stitches
        flexDirection: 'column-reverse'
      }
    }
  }
})

... 또는 Flex 어셈블리에서 직접 흐름을 정의합니다.

export const Flex = styled('div', {
  display: 'flex',
  variants: {
    wrap: {}, // defined as before
    flow: {
      'row': {
        flexDirection: 'row',
      },
      'column': {
        flexDirection: 'column',
      },
      'row-reverse': {
        flexDirection: 'row-reverse',
      },
      'column-reverse': {
        flexDirection: 'column-reverse',
      },
    },
  },
})

너might know,flex-flow는flex-direction와flex-wrap의 약자이기 때문에 우리는 더 이상 API를 작성하지 않고 그것을 채택한다.
현재 사용법은 (브라우저 기본값 무시):

<Flex flow="row-reverse" wrap="wrap" />
<Flex flow="column" />
// or with dedicated components
<Row reverse wrap="wrap" />
<Column />

네가 어떤 API를 가장 좋아하는지는 너에게 달려 있다. 그것들은 모두 매우 쓰기 좋다.나는 Flex만 먹거나 세 개만 먹는 것을 더 좋아한다.Flex 자체는 관리하기 쉽고 상하문 직접 보기flow 도구를 제공하며 특히 화면 크기에 따라 변경이 필요할 때 사용response styles:

<Flex flow={{ '@tablet': 'row', '@mobile': 'column' }} />

전용Row과 Column 구성 요소를 사용해서 이 조작을 하는 것을 상상해 보세요.

정렬

그래서 이곳에서 상당히 좋은 진전을 거두었고 우리는 가장 재미있는 부분인 정렬에 들어갔다.
공식 API는 사용justify-content과 align-items이지만 나는 이 두 단어가 내가 CSS를 쓸 때 아무런 의미가 없다고 생각해 왔다.내가 영어를 모국어로 하는 사람이 아니기 때문일 수도 있고, 탄성 상자를 고려할 때 의미가 별로 없기 때문일 수도 있다.
이러한 속성을 이해하도록 도와준 가장 위대한 문장 중 하나는 A Complete Guide to Flexbox(우리 대다수의 사람들이 여전히 언급하고 있다)이다.그것은 이러한 속성들이 이른바 주축과 가로축을 바꾸어 물품의 위치에 어떻게 영향을 미치는지 보여주는 가시화 효과가 있다.하지만 진정으로 나를 도와준 것은 flutter의 Flex widget였다.그것은 두 가지 좋은 속성이 있다. mainAxisAlignment 와 crossAxisAlignment. 사용법은 다음과 같다.

Flex(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.end,
)

이 API가 정말 위대한 것은 머릿속에 가시화되기 쉽다는 데 있다.만약 네가 하나 row 가 있다면, 너의 주축은 수평이고, 만약 네가 하나 column 가 있다면, 그것은 수직이다.따라서 방향이 어떻든지 간에 당신의 물품이 주축에 고르게 분포되고 가로축에 용기의 끝부분과 정렬되는 것을 상상할 수 있다.

CSS 팁:방향(https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flex- 방향)
이를 통해 새로운 API를 자체 구성 요소에 통합할 수 있습니다.

export const Flex = styled('div', {
  display: 'flex',
  variants: {
    wrap: {},
    flow: {},
    main: {
      'start': {
        justifyContent: 'flex-start',
      },
      'center': {
        justifyContent: 'center',
      },
      'end': {
        justifyContent: 'flex-end',
      },
      'stretch': {
        justifyContent: 'stretch',
      },
      'space-between': {
        justifyContent: 'space-between',
      },
    },
    cross: {
      start: {
        alignItems: 'flex-start',
      },
      center: {
        alignItems: 'center',
      },
      end: {
        alignItems: 'flex-end',
      },
      stretch: {
        alignItems: 'stretch',
      },
    },
  },
})

flutter의FlexAPI에 비해mainAxisAlignment를main로, crossAxisAlignment를cross로단축했습니다.TypeScript는 자동화된 경험을 제공하지만, 여러 개의 Flex 구성 요소를 작성할 때 이 긴 속성 이름을 보니 슬프다.이 두 속성은 Flex 구성 요소의 상하문에 존재하기 때문에 나는 그것들을 이해하면 충분하다고 믿는다.
현재 사용법은 다음과 같습니다.

<Flex flow="column" main="space-between" cross="center" />

이 구성 요소의 사고 과정은 상당히 간단하다(또는 익숙해질 수 있는 과정). 이것은 하나의 열이기 때문에 항목은 주축(y에 고르게 분포하고 축x에 가운데에 위치한다.

By the way, new Chrome Dev Tools flexbox visual debugging is awesome.

간격

지금 우리가 추가해야 할 마지막 아이템은 하위 요소 사이의 간격을 조절하는 아이템입니다.일반적으로 두 가지 방법이 있다. no-side-effects-but-nested-divs-one 각 하위 노드를 마이너스 간격이 있는 상자에 포장하여 하위 노드의 양식을 바꾸지 않는 상황에서 정확한 포장 행위를 허용한다. flex-gap-polyfill 한 방법은 > * 선택기를 통해 하위 노드의 양식을 바꾸는 것이다.Safary 14.1이 큰 인물 중 마지막이기 때문에 우리는 오늘 그것들에 대해 이야기할 필요가 없습니다.고맙게도 애플이 대대적으로 업데이트를 추진하고 있기 때문에 우리는 released with the support of flexbox gap property의 성장이 매우 빠르다는 것을 볼 수 있다.

export const Flex = styled('div', {
  display: 'flex',
  variants: {
    // the rest of the variants
    gap: {
      none: {
        gap: 0,
      },
      sm: {
        gap: '4px',
      },
      md: {
        gap: '8px',
      },
      lg: {
        gap: '16px',
      },
    },
  },
})

여기에는 평론할 만한 것이 없다.우선pollyfilled 옵션을 사용할 수 있습니다. global browser support 를 참고하십시오.그 다음으로 xs, sm 등 기호화폐가 디자인 시스템에 포함되어 있을 때만 사용할 수 있습니다. 그렇지 않으면 an example 기호화폐를 고려할 수 있습니다.셋째, 우리는 강력한 TailwindCSS number-tokens 과 row-gap CSS 속성을 실현하지 못했지만, 당신은 gap 와 같은 방법으로 그것들을 실현할 수 있습니다.셋째, 우리는 'none' 옵션을 보류하여 명확한 방식으로 조건부로 설정할 수 있도록 한다gap. 예를 들어 통과column-gap:@media.

gap={@desktop':'none','@tablet':'lg'}단점 종점

이렇게!나는 점점 더 많은 사람들이 그들의 UI를 레이아웃과 상호작용 요소의 조합으로 여기고 CSS를 거의 쓰지 않기를 바란다.
사용 예제 를 보실 수 있습니다.많은 것들과 마찬가지로 이 과정에서 맛을 볼 수 있기 때문에 운동장에서 마음대로 놀 수 있다. 이 도구들이 물건을 직관적으로 볼 수 있도록 어떻게 도와주는지 보자.
전체 예

import { stlyed } from '@stitches/react'

export const Flex = styled('div', {
  display: 'flex',
  variants: {
    wrap: {
      'wrap': {
        flexWrap: 'wrap',
      },
      'no-wrap': {
        flexWrap: 'nowrap',
      },
      'wrap-reverse': {
        flexWrap: 'wrap-reverse',
      },
    },
    flow: {
      'row': {
        flexDirection: 'row',
      },
      'column': {
        flexDirection: 'column',
      },
      'row-reverse': {
        flexDirection: 'row-reverse',
      },
      'column-reverse': {
        flexDirection: 'column-reverse',
      },
    },
    main: {
      'start': {
        justifyContent: 'flex-start',
      },
      'center': {
        justifyContent: 'center',
      },
      'end': {
        justifyContent: 'flex-end',
      },
      'stretch': {
        justifyContent: 'stretch',
      },
      'space-between': {
        justifyContent: 'space-between',
      },
    },
    cross: {
      start: {
        alignItems: 'flex-start',
      },
      center: {
        alignItems: 'center',
      },
      end: {
        alignItems: 'flex-end',
      },
      stretch: {
        alignItems: 'stretch',
      },
    },
    gap: {
      none: {
        gap: 0,
      },
      sm: {
        gap: '4px',
      },
      md: {
        gap: '8px',
      },
      lg: {
        gap: '16px',
      },
    },
    display: {
      flex: {
        display: 'flex',
      },
      inline: {
        display: 'inline-flex',
      },
    },
  },
})

주요 수확:

API를 가능한 한 공식 규범에 가깝게 하고 배우기 쉽도록 한다

자신의 API를 작성하는 것은 가능하지만 상당히 흔한 해결 방안이 있을 수 있다. 사람들은 이미 익숙해졌다

다른 도구를 배우면 Flutter 새로운 시각을 열 수 있다