도구 실행
CSS 플렉스박스 치트시트는 웹 레이아웃을 작성할 때 필요한 컨테이너 및 개별 아이템 속성을 한자리에서 찾아볼 수 있는 안내 도구입니다. 컨테이너 속성으로는 주축 배치 방향, 줄 바꿈 처리, 주축 정렬, 교차축 정렬, 여러 줄 정렬, 요소 간 간격 지정 방법이 정리되어 안내됩니다. 각 플렉스 아이템에서는 비율에 따른 확장과 축소, 기본 기준 크기, 단축 표기법, 개별 요소 정렬 및 순서 지정 속성을 확인할 수 있습니다. 기본값으로 설정된 방향이나 정렬 기준도 함께 제공됩니다. 아울러 요소 정중앙 배치, 상단 내비게이션 바, 카드 자동 줄 바꿈 레이아웃, 사이드바 배치, 하단 고정 영역 구성, 균등 분할 다단 컬럼 등 자주 쓰이는 CSS 예제 코드를 바로 확인하고 복사하여 적용할 수 있습니다.
사용 방법
- 도구를 실행하여 플렉스박스 속성 목록과 예제 레이아웃 정보를 불러옵니다.
- 컨테이너 속성 목록에서 주축 방향, 줄 바꿈, 정렬 방식, 간격 설정 정보를 확인합니다.
- 아이템 속성 목록에서 크기 확장 및 축소 비율, 기본 크기, 개별 정렬 속성을 확인합니다.
- 예제 레이아웃 영역에서 중앙 정렬이나 카드 레이아웃 등 필요한 CSS 코드를 확인하여 스타일시트에 적용합니다.
예시
- 화면 정중앙 정렬: display: flex; justify-content: center; align-items: center; 속성을 적용하여 자식 요소를 가로 및 세로 정중앙에 배치하는 예제 코드를 확인합니다.
- 반응형 카드 레이아웃: flex-wrap: wrap; 및 gap: 16px; 속성을 활용하여 화면 폭에 따라 카드가 자연스럽게 다음 줄로 넘어가는 레이아웃 코드를 확인합니다.
자주 묻는 질문
플렉스 컨테이너의 기본 배치 방향은 무엇인가요?
별도로 값을 지정하지 않으면 flex-direction 속성은 row(가로 방향)로 기본 설정됩니다.
flex-grow와 flex-shrink의 기본값은 각각 얼마인가요?
flex-grow의 기본값은 0이며, flex-shrink의 기본값은 1입니다.
gap 속성에는 어떤 값을 지정할 수 있나요?
16px나 1rem과 같은 유효한 CSS 길이 단위를 지정하여 아이템 사이의 여백을 간편하게 설정할 수 있습니다.
이 도구에서 브라우저 화면 렌더링 미리보기가 제공되나요?
본 도구는 플렉스박스 속성 안내와 CSS 코드 예제를 제공하는 참조 안내서이며, 브라우저 렌더링 미리보기나 CSS 유효성 검사 기능은 포함하지 않습니다.