웹 페이지를 구성 할 때 가장 중요한 것은 공들여 나열한 것 보자. Flexbox 및 그리드는 복잡한 레이아웃 구현입니다 간단하고 유연하게 해결하십시오. 이 기사에서 CSS Flexbox와 그리드의 기본 개념, 사용 및 차이점을 실제 예제로 요약하겠습니다.
Flexbox 란?
이것은 1 차원 레이아웃 (수평 또는 수직 방향)을 구성 할 때 유용한 CSS 모듈입니다. 기본 개념은입니다 주요 축 및 크로스 축을 기준으로 항목을 정렬하십시오.
core 핵심 속성
| 속성 | 설명 | | —— | —— | | 디스플레이 : Flex | Flexbox 활성화 | | 플렉스 방향 | 기본 축이 설정됩니다 (행, 열 등) | | 정당화 컨텐츠 | 주요 정렬 | | 정렬 구조 | 손 분류 | | 플렉스 포장 | 항목 문자열 변경 설정 |
Flexbox 연습 예제
““html” “`css .flex-container {display : flex; flex; 정당화-컨텐츠 : 공간-어라운드; 정렬-시민 : 중심; 높이 : 100px; 배경색; #eee;} .flex-container div {background : #4caf50; 컬러 : 흰색; 패딩 : 20px;}“🧩 lempbox ^ 정렬 된 버튼 그룹에 적합한 네비게이션 바.
그리드 란 무엇입니까?
이것은 2 차원 레이아웃 (수평 및 수직 동시 구성)을위한 최적화 된 CSS 모듈입니다. 페이지는 전체 레이아웃, 그리드 기반 설계에 매우 강력합니다.
core 핵심 속성
| 속성 | 설명 | | —— | —— | | 디스플레이 : 그리드 | 그리드 레이아웃 활성화 | | 그리드-템플릿-컬럼 | 열 구성 설정 | | 그리드-템플릿 열 | 설정 설정 | | 갭 | 세포 간격 | | 그리드-컬럼, 그리드 열 | 위치 지정 등 셀 합병
그리드 연습 예
““html” “`css .grid-container {display : Grid; 그리드-템플릿-컬럼 : 1fr 1fr; gap : 10px; 배경색 : #ddd;} .grid-container div {배경 : #2196f3; 컬러 : 흰색; 패딩 : 20px;}.
Flexbox vs Grid : 언제 사용합니까?
| 상황 | 권장 방법 | | —— | ———- | | 메뉴, 버튼 정렬 | Flexbox | | 응답 갤러리, 카드 목록 | 그리드 | | 복잡한 레이아웃 | 그리드 | | 간단한 정렬 | Flexbox | 💡 팁 : Flexbox는 컨텐츠 중심이며 그리드는 레이아웃 센터입니다.
실제 사용 사례
Flexbox : 헤더 영역 메뉴 정렬, 로그인 폼 그리드 : 포트 소아마비 카드보기, 블로그 보드 구조
학습 리소스 추천
마치다
Flexbox와 그리드는 둘 다 CSS 레이아웃의 큰 산입니다. 두 개념을 올바르게 이해하고 목적을 위해 사용하는 경우 깨끗하고 반응이 좋은 UI/UX를 구현할 수 있습니다. 지금 연습하고 CSS의 진정한 재미를 느끼십시오! 🔎 다음 게시물 주제 추천 → No. 26 : 모바일 반응 형 웹 페이지 생성 → No. 36 : 10 CSS로 구현 된 버튼 10
참조
https://flexboxfroggy.com/ https://cssgridgarden.com/