유연한 상자

일반적으로 flexbox 또는 flex로 알려진 유연한 상자 모델은 컨테이너 내의 요소를 배열하는 방법을 제공합니다. Flexbox를 사용하면 수직 또는 수평으로 단일 차원에서 효율적인 레이아웃 제어가 가능합니다. 표시 속성 역할을 하여 다양한 요소에 Flexbox를 적용할 수 있습니다.

이 튜토리얼에서는 다음 주제를 다룹니다.

1. Flex의 상위 및 하위 요소
2. 상위 플렉스 속성 구성
3. 하위 플렉스 속성 구성

Flex의 상위 및 하위 요소

요소에서 Flexbox를 활용하는 경우 일반적으로 하위 요소의 배열을 관리하기 위해 중요한 컨테이너에 적용됩니다. 플렉스박스를 사용하는 컨테이너 요소를 '플렉스 상위'라고 하며, 플렉스 상위의 직계 하위 요소를 '플렉스 하위'라고 합니다.

다른 요소를 포함하는 모든 요소를 Flex 상위 요소로 지정할 수 있습니다. Flex 상위를 생성하려면:

1. 캔버스에서 원하는 요소(예: 섹션, div 블록)를 선택합니다.
2. 다음으로 이동하세요. 스타일 패널 > 공들여 나열한 것 > 표시하다
3. 클릭 몸을 풀다

대체 표시 설정과 달리 상위 요소에서 Flexbox를 활성화하면 직계 하위 요소의 레이아웃에 영향을 줍니다. 기본적으로 하위 요소는 왼쪽으로 정렬되며 상위 요소에서 Flexbox가 활성화되면 수평으로 서로 옆에 배치됩니다. 이 동작에 대한 추가 조정은 Flex Parent 설정에서 이루어질 수 있습니다.

친절하게 참고: Flexbox를 활용하도록 설정된 요소는 직계 하위 요소 내의 하위 레이아웃을 변경하지 않습니다.

상위 Flex 속성 사용자 정의

Flexbox를 상위 요소에 적용하면 Flex 상위 요소와 해당 하위 요소 모두에 대해 다양한 레이아웃 옵션을 사용할 수 있게 됩니다.

• 방향
• 쌈
• 조정
• 간격

방향 설정 또는 반전

기본적으로 Flex 부모는 콘텐츠를 왼쪽에서 오른쪽 가로 방향으로 정렬합니다. 이 방향을 수정하려면 Flex 부모를 선택하고 스타일 패널 > 공들여 나열한 것 > 방향을 선택하고 다음 중 하나를 선택하세요. 수평의 또는 수직의 (각각은 “화살" 아이콘).

또한 Flex 상위 내에서 Flex 하위 요소의 방향을 유연하게 바꿀 수 있습니다. Flex 부모를 선택하고 스타일 패널 > 공들여 나열한 것 > 방향을 클릭하고 쓰러지 다화살 공개하다 쌈 옵션. 여기에서 선택할 수 있습니다. 오른쪽에서 왼쪽으로 > 단일 행 또는 아래에서 위로 > 단일 열. 이 작업은 플렉스 하위 요소의 배열을 변경하여 원래 첫 번째 요소가 마지막 요소가 되고 두 번째 요소가 마지막에서 두 번째 위치로 이동하는 식으로 위치를 전환합니다. 상위 요소의 방향을 바꾸는 것은 오른쪽에서 왼쪽 레이아웃이나 작은 디스플레이용으로 디자인할 때 유용할 수 있습니다.

추가 정보: Flex 상위 요소의 방향을 반대로 바꾸면 document 구조 내 Flex 하위 요소의 순서는 변경되지 않습니다. 시각적 순서와 DOM 순서 사이의 이러한 불일치는 웹 사이트 방문자에게 혼란을 초래할 수 있습니다.

Flex 하위 요소에 대한 감싸기 또는 감싸기 동작 조정

내 쌈 메뉴에서는 방향과 줄바꿈 설정을 동시에 제어하는 옵션을 만나게 됩니다. 기본적으로 flex 자식은 한 줄에 맞추려고 시도하므로 잠재적으로 부모 컨테이너가 오버플로됩니다. 이 문제를 해결하려면 하위 항목에 대한 래핑을 활성화하면 됩니다. Flex 부모를 선택하고 스타일 패널 > 공들여 나열한 것 > 방향을 클릭하고 드롭다운 화살표 액세스하려면 포장하다 쓰러지 다.

여기에서는 다양한 것을 선택할 수 있습니다. 포장하다 콘텐츠 구성 방법에 따른 대안:

• 왼쪽에서 오른쪽으로
• 오른쪽에서 왼쪽으로
• 위에서 아래로
• 아래에서 위로

왼쪽에서 오른쪽으로

다음 옵션을 사용하여 콘텐츠를 왼쪽에서 오른쪽으로 가로로 정렬할 수 있습니다.

• 마무리 — 부모의 너비를 초과하는 flex 자식은 아래의 새 줄로 이동됩니다.
• 마무리 — 부모의 너비를 초과하는 flex 자식은 위의 새 줄로 보내집니다.

오른쪽에서 왼쪽으로

다음 옵션을 사용하여 콘텐츠를 오른쪽에서 왼쪽으로 가로로 정렬할 수 있습니다.

• 단일 행 (줄바꿈 없음) — 초과하는 요소를 새 줄로 줄 바꿈하지 않고 플렉스 하위 항목의 순서를 반대로 바꿉니다.
• 마무리 — flex 하위 항목의 순서를 바꾸고 상위 항목을 초과하는 내용을 아래 새 줄로 래핑합니다.
• 마무리 — flex 하위 항목의 순서를 바꾸고 상위 항목을 초과하는 내용을 위의 새 줄로 래핑합니다.

위에서 아래로

다음 옵션을 사용하여 콘텐츠를 위에서 아래로 수직으로 정렬할 수 있습니다.

• 오른쪽으로 감싸기 — 부모의 높이를 초과하는 콘텐츠는 오른쪽의 새 열로 줄 바꿈됩니다.
• 왼쪽으로 감싸기 — 부모의 높이를 초과하는 콘텐츠는 왼쪽의 새 열로 줄 바꿈됩니다.

아래에서 위로

다음 옵션을 사용하여 콘텐츠를 아래에서 위로 수직으로 정렬할 수 있습니다.

• 단일 열 (줄바꿈 없음) — 새 열로 줄 바꿈하지 않고 플렉스 하위 항목의 순서를 반대로 바꿉니다.
• 오른쪽으로 감싸기 — flex 하위 항목의 순서를 바꾸고 상위 항목의 높이를 초과하는 콘텐츠를 오른쪽의 새 열로 래핑합니다.
• 왼쪽으로 감싸기 — flex 하위 항목의 순서를 바꾸고 상위 항목의 높이를 초과하는 콘텐츠를 왼쪽의 새 열로 래핑합니다.

Flex 자식 정렬

Flex 하위 항목의 여러 행이나 열을 정렬할 수 있습니다. 스타일 패널 > 공들여 나열한 것 > 조정.

그만큼 정렬 상자 (즉, 3 x 3 그리드)를 사용하면 Flex Progenitor 내부의 Flex 자손을 신속하게 조정할 수 있습니다. 그만큼 엑스 그리고 와이 축 드롭다운에는 정렬 상자 내에서 지정한 값이 표시됩니다. 정렬 상자에 대해 자세히 알아보세요.

일부 대안은 다음을 통해서만 액세스할 수 없습니다. 상자 정렬하지만 다음을 사용하여 연락할 수 있습니다. 엑스 그리고 와이 축 드롭다운. 각 드롭다운에서 사용할 수 있는 정렬 선택 사항은 Flex 코스가 수평인지 수직인지(즉, Flex 하위 항목의 행 또는 열을 정렬하는지 여부)에 따라 달라집니다.

수평 방향

플렉스 코스를 수평으로 정의하면 엑스 축 드롭다운은 아래 정렬 대안을 제공합니다.

• 왼쪽 — flex 자손은 flex progenitor의 왼쪽에 정렬됩니다.
• 센터 — 플렉스 자손은 플렉스 전구세포 내부 중앙에 위치합니다.
• 오른쪽 — flex 자손은 flex progenitor의 오른쪽에 정렬됩니다.
• 사이의 공간 — 플렉스 자손은 오른쪽과 왼쪽 가장자리에서 균일한 간격으로 배치됩니다.
• 주변 공간 — flex 자손은 다른 행과 가장자리에 고르게 분포됩니다.

그만큼 와이 축 드롭다운은 Flex 하위 항목의 가로 행을 정렬하기 위해 다음과 같은 옵션을 제공합니다.

• 맨 위 — 플렉스 자손은 플렉스 조상의 상단에 정렬됩니다.
• 센터 — 플렉스 자손은 플렉스 전구세포 내부 중앙에 위치합니다.
• 맨 아래 — 플렉스 자손은 플렉스 조상의 바닥에 정렬됩니다.
• 뻗기 — 빈 수직 공간을 차지하도록 플렉스 자손 스트레치
• 기준선 — flex 자손은 기준선 또는 텍스트가 있는 보이지 않는 선에 정렬됩니다.

수직 방향

플렉스 코스를 수직으로 설정하면 엑스 축 드롭다운은 다음과 같은 정렬 대안을 제공합니다.

• 왼쪽 — flex 자손은 flex progenitor의 왼쪽에 정렬됩니다.
• 센터 — 플렉스 자손은 플렉스 전구세포 내부 중앙에 위치합니다.
• 오른쪽 — flex 자손은 flex progenitor의 오른쪽에 정렬됩니다.
• 뻗기 — 빈 수평 공간을 차지하도록 플렉스 자손 스트레치
• 기준선 — flex 자손은 기준선 또는 텍스트가 있는 보이지 않는 선에 정렬됩니다.

전문가 팁: 수직 기준선 정렬은 특히 수직 텍스트 방향이 일반적이거나 선호되는 언어나 레이아웃에서 수직 텍스트 요소의 가독성을 향상시킬 수 있습니다.

그만큼 와이 축 드롭다운은 Flex 하위 항목의 수직 열을 정렬하기 위한 다음 옵션을 제공합니다.

• 맨 위 — 플렉스 자손은 플렉스 조상의 상단에 정렬됩니다.
• 센터 — 플렉스 자손은 플렉스 전구세포 내부 중앙에 위치합니다.
• 맨 아래 — 플렉스 자손은 플렉스 조상의 바닥에 정렬됩니다.
• 사이의 공간 — 플렉스 자손은 상단 및 하단 가장자리에서 균일한 간격으로 배치됩니다.
• 주변 공간 — flex 자손은 다른 행과 가장자리에 고르게 분포됩니다.

플렉스 자손 사이에 간격 추가

간격을 사용하면 여백이나 안쪽 여백을 추가할 필요 없이 Flex 하위 요소 사이의 공간을 정의할 수 있습니다. 열과 행 사이의 간격 크기를 수정하려면 flex progenitor를 선택하고 다음으로 이동합니다. 스타일 패널 > 공들여 나열한 것 > 갭.

기본적으로 열과 행 사이의 간격은 동기화됩니다. 이는 열의 간격 크기를 조정하면 행의 간격 크기가 자동으로 동일한 값으로 정렬됨을 나타냅니다. "를 클릭하면 됩니다.잠그다” 아이콘을 사용하여 열과 행 사이의 간격을 자동으로 조정할 수 있습니다.

전문가 팁: 간격 크기를 빠르게 늘리거나 줄이려면 갭 슬라이더를 누르거나 길게 누르세요. 옵션 (Mac의 경우) 또는 Alt (Windows의 경우) 열이나 행 필드 위에서 마우스를 왼쪽이나 오른쪽으로 밉니다.

Flex 자손 조정

Flex 자손의 기본 배열은 Flex 전구자에 지정된 Flex 레이아웃 설정을 기반으로 합니다. 그럼에도 불구하고 flex 자손에 대해 다음 설정을 대체할 수 있습니다.

• 크기
• 조정
• 주문하다

Flex 자손의 크기 수정

자손을 선택한 다음 다음으로 이동하여 flex 자손의 크기를 미세 조정할 수 있습니다. 스타일 패널 > 플렉스 자손 > 사이징. 크기 조정에는 4가지 옵션이 있습니다.

• 필요한 경우 flex 자손을 축소합니다(오버플로를 방지하기 위해).
• 가능한 경우 flex 자손을 확장합니다.
• flex 자손을 축소하거나 확장하지 마십시오.
• 성장 및 축소 동작 사용자 정의

모든 flex 자손이 다음 중 하나에 고정되어 있는 경우 가능하면 확장하세요., 필요한 경우 축소, 또는 축소하거나 확장하지 마십시오., 크기 조정 후 남은 공간은 다음으로 설정된 자손에게 공평하게 분배됩니다. 가능하면 확장하세요..

필요한 경우 축소

필요한 경우 축소 너비와 높이 속성(또는 너비와 높이가 지정되지 않은 경우 Flex 자손 내의 콘텐츠)을 기준으로 flex 자손의 크기를 조정할 수 있습니다. 이는 추가 공간이 남아 있을 때 플렉스 자손을 단단하게 만들지 만 공간이 부족할 때 최소 크기로 수축할 수 있도록 합니다.

가능하면 확장하세요.

가능하면 확장하세요. 사용 가능한 공간이 있는 경우 flex 자손이 확장되도록 허용합니다. 이를 통해 Flex 자손은 Flex 전구 내부의 과도한 공간을 흡수할 수 있습니다.

축소하거나 확장하지 마십시오.

축소하거나 확장하지 마십시오. 너비/높이 속성에 따라 플렉스 자손의 크기를 조정하여 완전히 유연하지 않게 만들 수 있습니다. flex 자손은 오버플로 시나리오에서도 확장 또는 축소가 금지됩니다.

성장 및 축소 동작 사용자 정의

완전히 선택할 수도 있습니다. 성장 및 축소 동작 사용자 정의 자손 요소의. 이는 굴곡 조상 내의 다른 자손에 비해 굴곡 자손이 수축하거나 확장하는 정도를 결정합니다.

그만큼 자라다 값은 부모 요소 내의 잉여 공간이 할당될 때 flex 자손이 다른 자손에 비해 확장될 수 있는 정도를 결정합니다. 값을 0으로 정의하면 필요 이상으로 확장되지 않습니다.

그만큼 수축 값은 음수 공간이 할당될 때 플렉스 자손이 다른 자손에 비해 얼마나 수축할 수 있는지를 결정합니다. 값을 0으로 설정하면 오버플로 시나리오에서도 축소되지 않습니다.

그만큼베이스 값은 flex-grow 또는 flex-shrink의 영향을 받기 전 요소의 초기 크기를 설정합니다. 이를 특정 측정기준(예: 20%, 250px 등)이나 자동에 할당할 수 있는 옵션이 있습니다. Auto로 설정하면 Flex 자식의 초기 크기는 너비나 높이(지정된 경우) 또는 내용에 따라 결정됩니다. 만약 베이스 값에 특정 치수가 할당되면 요소의 내용이나 너비/높이가 무시되며 Flex 자식은 동일한 Flex 컨테이너에 있는 다른 Flex 자식과 크기를 비례적으로 공유합니다.

Flex 하위 정렬 수정

자식을 선택한 다음 다음으로 이동하여 flex 자식의 정렬을 변경할 수 있습니다. 스타일링 패널 > 플렉스 아이 > 정렬 및 순서. 6가지 정렬 옵션을 사용할 수 있습니다.

• 자동(기본 설정)
• 맨 위
• 센터
• 맨 아래
• 뻗기
• 기준선

팁: Flex 자식 정렬을 위해 자동 여백을 활용할 수도 있습니다.

Flex 하위 항목 재정렬

기본적으로 flex 자식은 소스 코드에서 발생하는 순서대로 표시됩니다(순서는 네비게이터에서 볼 수 있습니다). 다양한 화면 해상도에 맞게 디자인 요소를 조정할 때 Flex 하위 요소를 재배열하는 것이 유용합니다.

Flex 자식의 기본 순서를 수정하려면 자식을 선택하고 다음 단계로 진행하세요. 스타일링 패널 > 플렉스 아이 > 주문하다. 6가지 주문 옵션이 있습니다:

• 현재 주문 유지 — flex 자식을 원래 위치에 유지합니다.
• 첫 번째 — Flex 컨테이너 내에서 Flex 자식을 앞으로 이동합니다.
• 마지막 — Flex 컨테이너 내에서 Flex 자식을 뒤로 이동합니다.
• 주문을 사용자 정의 — 특정 순서 값을 지정하여 여러 flex 자식의 사용자 정의 배열을 가능하게 합니다.

Flex 컨테이너 내에서 Flex 하위 항목의 배치를 지정하는 사용자 정의 순서에 고유한 숫자 값을 할당할 수 있습니다. 동일한 맞춤 주문 값을 공유하는 Flex 하위 항목은 원래 배치를 기준으로 정렬됩니다.

맞춤 주문을 활용하는 경우에는 활용을 피하세요. 첫 번째 또는 마지막 첫 번째 또는 마지막 하위 요소를 지정합니다. 첫 번째 flex 자식에 -1의 순서를 할당하는 반면 마지막 1의 순서를 할당합니다. 사용자 정의 순서를 사용하는 경우 1보다 큰 값은 순서가 있는 flex 하위 항목 뒤에 flex 하위 항목을 배치합니다. 마지막. -1보다 작은 값은 다음으로 설정된 요소 앞에 flex 자식을 배치합니다. 첫 번째.

팁: flex 하위 항목의 순서를 변경할 때 document 순서는 변경되지 않은 채 유지된다는 점을 기억하세요. 이는 요소의 시각적 순서와 DOM 구조가 정렬되지 않아 웹사이트 방문자에게 혼란을 야기할 수 있음을 나타냅니다.