좋아, 커피 한잔 (또는 차, 판단하지 않음) Flexbox의 세계로 빠져봅시다. ! 어떤 기기에서든 웹페이지를 보기 좋게 만드는 데 어려움을 겪은 적이 있다면 걱정하지 마세요. 혼자가 아닙니다. Flexbox는 문제를 해결하기 위해 여기에 있습니다. 저를 믿으세요. 들리는 것만큼 무섭지 않습니다!
도대체 Flexbox가 무엇인가요?
Flexbox는 마치 마술처럼 항목을 쉽게 정리하는 개인 레이아웃 도우미와 같습니다. 플렉스 컨테이너를 설정하고 힘들이지 않고 콘텐츠를 정리하는 방법을 알아보세요.
CSS의 강력하고 효율적인 레이아웃 모델을 사용하면 컨테이너 내에서 반응적이고 유연하게 요소를 구성하고 정렬할 수 있습니다. 복잡한 계산이나 위치 조정이 필요 없이 항목 간 공간을 쉽게 정렬하고 배포할 수 있습니다. Flexbox는 가능한 가장 간단한 방법으로 1차원 레이아웃(행 또는 열)을 처리하도록 제작되었습니다.
자주 발생하는 실수를 방지하기 위한 실제 사례와 팁을 살펴보겠습니다. 모닝 커피처럼 디자인이 매끄럽게 유지됩니다.
Flexbox를 더 잘 이해하기 위해 Flexbox를 두 가지 주요 부분으로 나누어 보겠습니다.
Flex 컨테이너(상위 컨테이너)의 속성:
- 플렉스 방향
- 플렉스 랩
- 플렉스 플로우
- 내용 정당화
- 항목 정렬
- 콘텐츠 정렬
먼저 상위 컨테이너에 'display: flex'를 설정해야 합니다. 그러면 Flexbox가 활성화되고 모든 속성을 컨테이너와 해당 항목에 적용할 수 있습니다.
플렉스 방향
flex-direction:
row | row-reverse | column | column-reverse
로그인 후 복사
로그인 후 복사
컨테이너에 있는 항목의 기본 방향을 정의합니다. 방향을 지정하지 않으면 기본값이 적용됩니다:
-
행(기본값): 항목이 행처럼 가로로 구성됩니다.
-
row-reverse: 항목이 가로로 정리되지만 반대 방향으로 정리됩니다.
-
열: 항목이 세로로 정리됩니다.
-
column-reverse: 항목이 수직 역순으로 구성됩니다.
####플렉스 랩
flex-wrap
nowrap | wrap | wrap-reverse
로그인 후 복사
로그인 후 복사
항목을 여러 줄/열로 나눌지 여부를 제어합니다.
-
nowrap(기본값): 항목이 한 줄/열에 유지됩니다.
-
Wrap: 항목이 맞지 않으면 새 줄/열로 줄 바꿈됩니다.
-
Wrap-reverse: 항목을 반대로 래핑합니다.
플렉스 플로우
주 축과 교차 축을 함께 정의하는 flex-direction 및 flex-wrap 속성의 약어입니다. 기본값: 행 현재 랩.
정당화 내용
justify-content
flex-star | flex-end | space-between | space-around | space-evenly
로그인 후 복사
로그인 후 복사
주축을 따라 항목을 정렬합니다(flex-direction에 의해 설정된 방향):
-
flex-start: 항목이 컨테이너 시작 부분에 정렬됩니다.
-
flex-end: 항목이 컨테이너 끝에 정렬됩니다.
-
center: 항목이 중앙에 정렬됩니다.
-
space-between: 항목 사이에 여분의 공간이 있어 항목이 균등한 간격으로 배치됩니다.
-
space-around: 항목 주위에 동일한 공간이 있습니다.
-
space-evenly: 항목 사이와 주위에 동일한 공간이 있습니다.
항목 정렬
교차축(주축에 수직)으로 항목 정렬:
-
Stretch(기본값): 항목이 컨테이너를 채울 때까지 늘어납니다.
-
flex-start: 항목이 교차축의 시작 부분에 정렬됩니다.
-
flex-end: 항목이 교차축의 끝에 정렬됩니다.
-
center: 항목이 중앙에 정렬됩니다.
-
기준선: 항목이 콘텐츠 기준선에 맞춰 정렬됩니다.
내용 정렬
flex-direction:
row | row-reverse | column | column-reverse
로그인 후 복사
로그인 후 복사
여러 줄의 플렉스 항목이 있는 경우 컨테이너의 행을 정렬합니다.
- 정렬 항목과 유사한 옵션이지만 여러 행에 적용됩니다.
또한 Flexbox에만 국한되지는 않지만 Flexbox 레이아웃 스타일을 지정하는 데 간격이 유용한 경우가 많습니다.
flex-wrap
nowrap | wrap | wrap-reverse
로그인 후 복사
로그인 후 복사
플렉스 아이템(하위 컨테이너)에 적용할 수 있는 속성:
- 주문
- 플렉스 성장
- 플렉스 수축
- 플렉스 기반
- 플렉스
- 자체 정렬
주문하다
Flex 항목의 시각적 순서를 제어합니다. 모든 항목의 기본값은 0이지만 더 높거나 낮은 숫자를 설정하여 순서를 변경할 수 있습니다.
유연하게 성장하다
justify-content
flex-star | flex-end | space-between | space-around | space-evenly
로그인 후 복사
로그인 후 복사
추가 공간이 있는 경우 항목이 차지해야 하는 공간을 정의합니다. 모든 항목에 flex-grow: 1이 있는 경우 추가 공간을 균등하게 공유합니다.
플렉스 수축
align-items
stretch | flex-start | flex-end | center | baseline
로그인 후 복사
공간이 좁을 때 항목이 얼마나 줄어들어야 하는지 정의합니다. 기본값은 1(항목이 축소될 수 있음)입니다. 0은 수축을 방지합니다.
플렉스 기반
공간이 분배되기 전 항목의 초기 크기를 설정합니다. 픽셀, 백분율 또는 자동 단위일 수 있습니다.
몸을 풀다
gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px
로그인 후 복사
flex-grow, flex-shrink 및 flex-basis를 한 번에 설정하는 약어입니다. 예를 들어 flex: 1 1 200px; 기본 크기 200px로 항목을 늘리거나 줄일 수 있다는 뜻입니다.
자기 정렬
개별 항목을 다른 항목과 다르게 정렬할 수 있습니다(항목 정렬 재정의). 기본적으로 컨테이너의 align-items 값을 사용합니다.
이 코드는 실제 Flexbox 속성을 탐색하고 CSS 스타일을 실험하기 위한 완벽한 시작점을 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Flexbox 예제</title>
<link rel="stylesheet" href="styles.css">
</머리>
<본문>
<div>
<p>Flexbox 모험을 마무리하면서 <em>CSS 마법—의사 클래스</em>에 대해 조금 이야기해 보겠습니다. 이러한 편리한 도구를 사용하면 <strong>위치, 상태 또는 상호 작용</strong>을 기반으로 요소의 스타일을 지정하여 Flexbox 레이아웃을 더욱 동적이고 대화형으로 만들 수 있습니다. :nth-child()를 사용하여 스타일을 바꾸거나 :hover를 사용하여 미묘한 애니메이션을 만들거나 :first-child를 사용하여 하나의 항목을 돋보이게 하는 등 의사 클래스를 사용하면 추가 HTML 없이 고유한 터치를 추가할 수 있습니다.</p>
<p>계속해서 기술을 레벨업할 준비가 되셨나요? 물론이죠! 다음 게시물에서는 레이아웃에 생기를 불어넣기 위해 CSS 기술에 대해 더 깊이 알아볼 예정입니다. 저는 또한 배우고 성장하기 위해 여기에 있습니다. 팁, 피드백 또는 수정 사항이 있으면 주저하지 말고 댓글을 남겨주세요. 계속해서 함께 만들어가세요!</p>
로그인 후 복사
위 내용은 Flexbox 마스터하기: 반응형 레이아웃 구축에 대한 내 연구 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
