Flexbox를 사용할 때 나는 볼 수 있는 저렴한 의자를 만들었다.
사용 방법에 대한 설명은 저가 의자 이후에도 계속된다.
Grid Layout의 저렴한 의자는 여기

Flexbox 저가 의자

PDF 버전은

Flexbox 저렴한 의자 보기

기울기 워크시트 왼쪽은 상위 요소로 설정할 속성입니다.
오른쪽 위 모서리는 하위 요소로 설정된 속성입니다.
오른쪽 아래 모서리는 각 속성과 값에 대한 설명입니다.
일반적인 속성은 굵은 문자이고 기본값은 노란색 문자입니다.
인형 아이콘은 참조를 나타내고, 상자 인형 ①은 도인형 ①을 참조하십시오.
손 모양 아이콘은 짧은 손의 특성을 나타낸다.

Flexbox 제작 방법

싸구려 의자를 보면서 읽으세요.

① 부모 요소를 탄성 용기로 지정합니다.

display: flex;
이것만 기본flex-direction:row입니다.에서 설명한 대로 해당 매개변수의 값을 수정합니다.

② 탄성 컨테이너의 주축 방향을 지정합니다.

flex-direction:
시트 왼쪽을 기울이는 ② 네 가지 옵션 중 주축 방향을 선택합니다.
기본적으로 왼쪽 상단의flex-direction:row;대화상자, 사용자 정의 형식을 정의할 수 있습니다
기타row-reverse;column; column-reverse; 세 가지 선택.

flex-wrap:
하위 요소(탄성 항목)가 비교적 많으면flex-wrap:에서 반환 방법을 지정하십시오.
수치
설명
nowrap;
줄을 바꾸지 않다
wrap;
줄 바꿈 문자가 있습니다.
wrap-reverse;
반대 방향으로 되돌아오다
flex-flow:
flex-direction:와 flex-wrap:의 짧은 손

각 요소의 위치와 사이즈를 조정하여 완성하다.

②에서 설정한 주축, 교차축 방향은 각 요소의 위치 조정에 영향을 미친다.
리본에서 를 클릭합니다.
각 값의 이동 방법에 대해서는 오른쪽 아래에 있는 사람 ②를 참조하십시오.

부모 요소에 설정할 속성

속성
설명
justify-content:
주축 방향의 하위 요소의 위치 지정(사람 참조①)
align-items:
교차축 방향의 하위 요소의 위치 지정(사람 참조①)
align-content:
flex-wrap: 반환된 교차축 방향의 위치 지정(인형① 참조)

각 하위 요소에 설정할 속성

속성
설명
flex-grow:
성장률
flex-shrink:
수축률
order:
순서 지정
flex-basis:
주축 방향의 치수 지정 (width 또는 height)
align-self:
교차축 방향에서 각 하위 요소의 위치 지정(사람 참조①)
z-index:
하위 요소 중첩 순서 지정하기
flex:
flex-grow: 그리고 flex-shrink: 그리고 flex-basis: 짧은 손
주축, 교차축 방향을 이해하면 Flexbox를 간단히 사용할 수 있습니다!
영어판의 저렴한 의자가 여기 있습니다.

Flexbox cheat sheet / English version

Grid Layout의 저렴한 의자는 여기

참고 자료

MDN: flexbox
CSS-TRICKS: flexbox
Udemy: CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)