“라인 중간에 너무 어려워요 …”레이아웃 정렬 때문에 어려움을 겪고 있다면 CSS Flexbox를 배워야합니다. 이 기사에서 Flexbox의 기본 개념과 정렬 속성을 직관적으로 설명합니다.
Flexbox 란?
플렉스 박스 유연하게 정렬 및 배열을위한 CSS 모듈. 하나의 축 방향 (행 또는 열)을 기준으로 요소를 정렬합니다. “css.container {display : flex;} “| 속성 | 설명 | | —— | —— | | 디스플레이 : Flex | 부모 요소, 유연한 분류 어린이로 지정 | 플렉스 방향 | 정렬 방향 (행, 열 등) | 정당화 컨텐츠 | 기본 정렬 (수평 정렬) | 정렬 구조 | 교차 축 (수직 정렬) 지시
기본 구조 예
“`HTML”“CSS .Container {display : flex; 정당화; 정당화-컨텐츠 : 중앙; 정렬-시민;} .box {width : 100px; 높이 : 100px; 배경 : #4caf50; 마진 : 10px;}”`🖼️ all 태그 예시 예시 :
주요 속성 요약
1. 플렉스 방향
| 가치 | 설명 | | — | —— | | 열 | 수평 방향 분류 (기본값) | 열 | 수직 방향 정렬 | Row-Reverse | 오른쪽에 왼쪽 | 열 반사 | 맨 위
2. 정당화 컨텐츠
| 가치 | 설명 | | – | – | —— | | 플렉스 스타트 | 왼쪽 정렬 | 센터 | 중간 정렬 | 플렉스 엔드 | 올바른 정렬 | 우주 중간 | 둘 다 끝 정렬, 균등하게 | 우주 | 요소 사이의 마진 | 공간적으로 | 요소와 외부 마진
3. 정렬 -시템 (수직 정렬)
| 가치 | 설명 | | —— | —— | | 뻗기 | 부모의 높이에 의해 증가 (기본값) | 센터 | 중간에 정렬 | 플렉스 스타트 | 위의 정렬 | 플렉스 엔드 | 아래에 정렬 | 기준선 | 텍스트 기준선 정렬
어린이 요소의 개별 통제
1. 주문
“CSS.box : nth -child (2) {order : -1;} “ 시각적 순서를 변경하십시오
2. Flex-Grow / Flex-Shrink / Flex-Basis
“`css .box {flex : 1; / 성장 : 1 수축 : 1 기준 : 0% /} ” ” 얼마나 많은 공간을 가져갈 것인가 Crystal Flex : 0 1 Auto → 기본값
실제 레이아웃 예 : 반응 메뉴 표시 줄
“CSS .NAVBAR {display : flex; 정당화-컨텐츠 : Space-BetWeeen; Align -items : Center;}” ” ” ” ” ” ” ” ” ” ” ” ” ” ”메뉴 + 버튼
Flexbox 대 그리드?
| 분류 | Flexbox | 그리드 | | —— | ——— | —— | | 방향 | 1 축 중앙 | 2 축 (Haeng and Column) 중앙 | 목적 | 요소 정렬 | 전체 레이아웃 구성 | 예 | 메뉴, 버튼 라인 | 갤러리, 대시 보드
마치다
Flexbox는 이것은 CSS 정렬 게임을 변화시키는 기술입니다. 정당화, 정렬 구조, 플렉스 방향 이 세 가지를 요리하더라도 대부분의 UI를 깔끔하게 정렬 할 수 있습니다. 오늘부터 레이아웃을 Flexbox에 맡기십시오! 🔎 다음 게시물 주제 추천 → 12 번 : CSS Flexbox 및 그리드 싸움 이해 → 26 : 모바일 반응 웹 페이지
참조
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://developer.mozilla.org/ko/docs/web/css/flex