CSS Flexbox 이해: 초보자 가이드!!!

?목차

1. CSS Flexbox 소개
2. 필수 속성
3. 고급 속성
4. 결론

---

?️ CSS Flexbox 소개

CSS Flexbox는 모든 레이아웃 문제를 해결하는 최고의 솔루션입니다. 이 기사에서는 Flexbox를 마스터하고 Flexbox의 속성을 살펴보고 이를 사용하여 멋지고 반응성이 뛰어난 디자인을 쉽게 만드는 방법에 전적으로 초점을 맞추고 있습니다. 이제 본격적으로 레이아웃을 매끄럽게 만들어 보겠습니다.

유연한 상자 레이아웃(Flexbox)은 행이나 열이라는 단일 축을 따라 항목을 정렬하는 1차원 레이아웃 방법입니다. 저처럼 시각적으로 배우는 사람이라면 별로 이해가 안 될 수도 있으니 그림을 그려보겠습니다 -

책이나 좋아하는 간식 등 마음에 드는 물건으로 가득 찬 상자가 있는데 완전히 혼란에 빠져 있다고 상상해 보세요. Flexbox는 상황을 해결하기 위해 급습하는 약간의 OCD를 갖춘 마법의 정리 도구와 같습니다. 귀하의 정확한 요구에 맞게 모든 것을 행과 열로 깔끔하게 정리합니다.

항목을 균등한 간격으로 배치하거나 한쪽으로 그룹화하거나 완벽하게 중앙에 배치하려는 경우 Flexbox를 선택하세요. 이제 Flexbox가 OCD를 구성하는 역할을 한다는 것을 알았으니 Flexbox가 마법을 일으키기 위해 사용하는 도구를 살펴보겠습니다! 필수 속성은 다음과 같습니다.

** 필수 속성 **

1. 디스플레이: flex: 여기가 모든 것이 시작되는 곳입니다! 이 속성을 컨테이너(좋아하는 스낵으로 채워진 상자)에 추가하면 모든 스낵(하위 요소)이 기본적으로 단일 축(행)을 따라 깔끔하게 정렬됩니다. 하지만 걱정하지 마세요. 원하는 경우 열로 전환할 수 있습니다!"

참고: CodePen 예제와 상호 작용하려면 그림의 오른쪽 상단에 있는 "Edit on CodePen" 텍스트를 클릭하세요. 이를 통해 실시간으로 코드를 가지고 놀 수 있습니다!

CodePen에서 값 실험:

2. flex-direction: 스낵이 정렬되는 방향을 결정합니다. 기본적으로 스낵은 일렬로 정렬되지만 플렉스 방향은 이를 변경할 수 있는 힘을 제공합니다. 값은 다음과 같습니다.

아. row(default): 간식이 왼쪽에서 오른쪽으로 일렬로 늘어서 있습니다.

ㄴ. row-reverse: 항목의 방향이 바뀌고 오른쪽에서 왼쪽으로 정렬되므로 약간 반항적일 때 적합합니다!

ㄷ. 칼럼: 스낵 타워처럼 아이템이 수직으로 쌓입니다! 각 스낵(또는 플렉스 아이템)이 서로 겹쳐져 맛있는 스낵 타워를 형성한다고 상상해 보세요.

디. column-reverse: 스택은 맨 아래부터 시작하여 쌓입니다.

다음은 그림입니다. flex-direction 값을 자유롭게 변경하여 작동 방식을 확인할 수 있습니다.

3. Justify-content: 이것은 플렉스 컨테이너의 마술 지팡이이며 스낵 사이에 공간을 분배하는 데 사용됩니다. 그것은 스낵 상자에 스낵을 배열하는 방법을 결정합니다. 주요 옵션은 다음과 같습니다.

아. flex-start(default): 모든 스낵은 행이나 열의 시작 부분에 모입니다.

ㄴ. flex-end: 모든 스낵은 행이나 열의 끝에 모입니다.

ㄷ. 중앙: 간식은 행이나 열의 중앙에 모입니다.

디. space-between: 첫 번째 스낵은 시작 부분으로 푸시되고, 마지막 스낵은 끝 부분으로 푸시되며, 나머지는 그 사이에 균등한 간격으로 배치됩니다.

마. space-around: 스낵 주위에 동일한 공간이 확보됩니다.

f. 공간 균등: 스낵은 사방에서 완벽하게 동일한 공간을 즐깁니다.

다음은 그림입니다. justify-content 값을 자유롭게 변경하여 작동 방식을 확인할 수 있습니다.

4. 항목 정렬: 이미 flex-direction을 사용하여 스낵을 행이나 열로 배열했습니다. 이제 스낵 용기에 스낵을 얼마나 높이 또는 얼마나 낮게 넣을지 결정할 차례입니다. 일반적인 값은 다음과 같습니다.

아. flex-start: 교차축의 시작 부분에 항목을 정렬합니다.

ㄴ. flex-end: 항목을 교차축 끝에 정렬합니다.

ㄷ. center: 교차축을 따라 항목을 중앙에 배치합니다.

디. Stretch: 항목을 늘려 컨테이너를 채웁니다(블록 수준 항목의 기본값).

마. 기준선: 텍스트 기준선을 따라 항목을 정렬합니다.

정렬 항목이 실제로 작동하는 모습을 살펴보겠습니다.

아래의 코드 펜을 탐색하여 실제로 작동하는 마법을 확인하세요! CSS를 자유롭게 조정하여 정렬이 어떻게 변경되는지 확인하세요.

** 고급 속성 **

1. Align-content: align-content 속성은 Flex 컨테이너(스낵 컨테이너) 내에서 교차축을 따라 여러 행의 플렉스 항목(또는 비유적으로 스낵)이 배치되는 방식을 지정합니다. 이는 Flex 항목의 행이나 열이 여러 개 있는 경우에만 작동합니다. 즉, Flex 컨테이너에 래핑된 콘텐츠(flex-wrap: Wrap)가 있어야 합니다.

Align-content의 가치

아. flex-start: 스낵의 모든 행이 스낵 용기 상단에 모여서 용기의 나머지 부분이 다소 비어 있는 느낌을 줍니다.

ㄴ. flex-end : 스낵 용기 하단에 스낵 줄을 모아 상단에 빈 공간을 남깁니다(상단에 외로이).

ㄷ. 중앙: 스낵통의 상단과 하단에 빈 공간을 남기고 중앙에 스낵을 줄지어 모았습니다.

디. space-between: 스낵의 행은 첫 번째 행이 맨 위에, 마지막 행이 맨 아래에 균등한 간격으로 배치됩니다.

마. space-around: 행 사이에 동일한 간격으로 행 간격이 지정됩니다.

f. space-evenly: 행 사이의 간격이 동일합니다.

지. Stretch(기본값): 우리 스낵은 모두 "스트레치" 스낵 용기의 높이를 채웁니다.

align-content 값을 flex-start, flex-end, center, space-between, space-around, space-evenly 또는 Stretch로 바꿔 변경 사항을 관찰할 수 있습니다. 대화형 일러스트레이션을 보려면 이 CodePen을 확인하세요!

비슷해 보이지만 align-items와 align-content는 동일하지 않습니다. 차이점을 명확히 해보자:

align-items
는 교차축을 따라 개별 플렉스 항목을 정렬합니다. 단일 행/열 내의 항목 자체에 대한 정렬을 설정하는 것으로 생각하십시오.

align-content는 플렉스 컨테이너의 교차축을 따라 여러 항목 행(래핑이 활성화된 경우, 즉 flex-wrap:wrap)을 정렬합니다.

? 주요 내용:

align-items는 단일 플렉스 컨테이너 내의 모든 항목을 처리하는 반면, align-content는 여러 행의 항목을 처리합니다(래핑된 행이 여러 개 있는 경우에만).

** 기억하세요**:

2. Flex-wrap: 이 속성은 공간이 부족할 때 Flex 항목(좋아하는 스낵이라고도 함)을 모두 한 행/열로 압축할지 아니면 여러 행/열로 정중하게 포장할지 결정합니다.

값은 다음과 같습니다.

아. nowrap(기본값): 스낵이 숨 쉴 공간을 원하지 않고 행/열에 갇힌 상태를 유지하기로 결정합니다.

ㄴ. Wrap: 이제 숨 쉴 공간이 필요하므로 첫 번째 행/열에 더 이상 공간이 없으면 다음 행이나 열로 쏟아집니다.

c .wrap-reverse: Wrap과 거의 동일하지만 역방향으로 수행합니다. 플렉스 방향에 따라 아래에서 위로 또는 오른쪽에서 왼쪽으로.

다음은 flex-wrap 속성의 동작을 보여주는 CodePen입니다. 다양한 값(nowrap, Wrap 및 Wrap-reverse)을 실험하여 Flex 컨테이너가 스낵의 오버플로를 처리하는 방법을 확인할 수 있습니다.

3. Flex: 이는 Flex 컨테이너의 사용 가능한 공간에 맞게 Flex 항목(스낵)이 어떻게 늘어나거나 줄어들 것인지를 설정하는 결정적인 속성입니다. 3가지 하위 속성을 줄여서 표현한 것입니다:

아. flex-grow: 플렉스 아이템이 얼마나 늘어날지 결정합니다.

ㄴ. flex-shrink: 공간이 부족할 때 플렉스 아이템이 얼마나 줄어들지 결정합니다.

ㄷ. flex-basis: 항목이 커지거나 줄어들기 전에 시작 크기를 결정합니다.

flex 속성과 해당 구성요소를 보여주는 CodePen은 다음과 같습니다

Flex 값을 조정하면 항목의 레이아웃이 어떻게 변경되는지 자유롭게 열어서 상호작용해 보세요.

4. Align-self: 이 속성은 Flex 컨테이너의 항목 정렬 값을 재정의합니다. 기본적으로 항목을 교차축에 정렬합니다. 값은 다음과 같습니다.

아. auto(기본값): 컨테이너의 align-items 속성에서 정렬을 상속합니다.

ㄴ. flex-start: 교차축의 시작 부분에 항목을 정렬합니다.

ㄷ. flex-end: 항목을 교차축 끝에 정렬합니다.

디. center: 교차축을 따라 항목을 중앙에 배치합니다.

마. Stretch: 교차축을 채우기 위해 항목을 늘립니다(고정 크기가 아닌 경우).

f. 기준선: 텍스트 기준선을 따라 항목을 정렬합니다.

대화형 일러스트레이션을 보려면 이 CodePen을 확인하세요!

? 결론
CSS Flexbox는 레이아웃에 접근하는 방식을 단순화합니다. 디스플레이와 같은 몇 가지 주요 속성(flex, flex-direction, justify-content 및 align-items)을 사용하면 반응성이 뛰어나고 아름답게 정렬된 디자인을 쉽게 만들 수 있습니다.

? 더 깊이 들어가고 싶나요? 다음은 몇 가지 환상적인 리소스입니다.

1. CSS-Tricks: Flexbox에 대한 완벽한 가이드

모든 Flexbox 속성과 사용 사례를 다루는 자세한 가이드입니다.

1. MDN 웹 문서 - CSS Flexbox

설명, 예시, 브라우저 호환성이 포함된 공식 문서

무엇이든 마스터하는 열쇠는 꾸준한 연습이므로, 이해를 확고히 할 수 있도록 최대한 많이 연습하세요. 이러한 도구를 더 많이 사용할수록 아름다운 레이아웃을 만드는 능력에 대한 자신감이 더 커질 것입니다.

다음에는 친절한 동네 작가님(네, 머리로는 이해가 되네요). ? 안녕!!!

위 내용은 CSS Flexbox 이해: 초보자 가이드!!!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!