CSS Flexbox에서 Tailwind로

display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.

플렉스 컨테이너는 거의 일대일로 옮겨집니다. display:flex는 flex, justify-content:space-between은 justify-between이 됩니다. 간격은 자식 margin 대신 컨테이너 gap-4가 안정적입니다.

display와 방향

display:flex → flex; flex-direction:column → flex-col. 컨테이너부터, 그다음 자식.

정렬

justify-content:center → justify-center; align-items:center → items-center. 짧은 이름, 같은 아이디어.

gap vs margin

간격이 균일하면 각 자식 margin보다 컨테이너 gap-4를 선호하세요.

사용해보기

변환기 열기

.example { display: flex; gap: 1rem; padding: 1rem; }

신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.