6XC

CSS 플렉스박스 놀이터

flex-direction, justify-content, align-items, wrap, gap을 실시간 박스에서 조정하고 컨테이너 CSS를 복사하세요.

조회수 854회

1
2
3
4
5

플렉스박스 한눈에 보기

display: flex를 설정하면 컨테이너가 1차원 레이아웃 엔진으로 바뀝니다. justify-content는 주축을 따라 요소를 배치하고, align-items는 교차축에서 정렬하며, flex-direction은 축 자체를 선택하고, gap은 마진 없이 요소 사이 간격을 만듭니다. 컨트롤을 조작하며 번호가 매겨진 박스가 실시간으로 재배치되는 모습을 확인해 보세요.

자주 묻는 질문

무언가를 완벽하게 가운데 정렬하려면?

유명한 세 줄입니다: display: flex; justify-content: center; align-items: center; — 수평과 수직 정렬을 한 번에 끝냅니다.

플렉스박스와 그리드 중 무엇을 써야 하나요?

플렉스박스는 내용에 맞춰 크기가 정해지는 1차원 행이나 열(툴바, 내비게이션, 카드 줄)에 강합니다. 그리드는 명시적인 트랙을 사용하는 2차원 레이아웃을 위해 만들어졌습니다. 둘은 함께 잘 어울립니다.

비슷한 도구

CSS 그라데이션 생성기 실시간 미리보기로 선형, 방사형, 원뿔형 CSS 그라데이션을 디자인하고 코드를 복사하세요. 생성하기 CSS 박스 그림자 생성기 오프셋, 흐림 정도, 퍼짐, 색상, 불투명도, 안쪽 그림자(inset)를 시각적으로 조정하며 실시간 미리보기로 그림자를 디자인하세요. 생성하기 CSS 모서리 둥글기 생성기 각 모서리를 개별적으로 또는 한 번에 px나 %로 둥글리고, 실시간 미리보기와 복사 가능한 CSS를 확인하세요. 생성하기 CSS 텍스트 그림자 생성기 오프셋, 흐림, 색상, 불투명도를 조정해 text-shadow를 디자인하고 샘플 텍스트로 실시간 미리보기를 확인하세요. 생성하기