동일 너비 Flexbox 열 — CSS 생성기
CSS Flexbox 레이아웃을 시각적으로 구축합니다. flex-direction, justify-content, align-items, flex-wrap 및 컨테이너의 간격과 자식별 flex-grow, flex-shrink 및 flex-basis가 모두 실시간 미리보기와 복사 가능한 CSS로 제공됩니다.
처리 중...
0%
결과
이 페이지는 3개의 미리보기 상자 모두에 이미 flex-grow: 1이 설정된 생성기를 엽니다. 시청하세요: 내용에 맞게 축소하는 대신 모든 상자는 행의 남은 공간에 대해 동일한 공유를 요구합니다. 이는 동일한 너비의 유연한 열을 위한 전체 방법입니다. 너비 비율도 없고, 계산()도 없고, 동기화를 유지할 고정 픽셀 수학도 없습니다.
flex-grow: 1은 자식에게 성장하라고 지시하고, 행에 있는 모든 자식에게 이 설정을 설정하면 모두 같은 양만큼 커지므로 자식의 수나 그 안에 어떤 내용이 들어있든 상관없이 결국 동일한 너비가 됩니다. 아래 컨트롤이 있는 상자를 추가하거나 제거하면 나머지 열이 즉시 재배포되어 동일하게 유지됩니다. 프로덕션에서 이 레이아웃에 대해 브라우저 창의 크기를 조정하면 동일한 방식으로 작동합니다.
이는 동일한 높이의 카드 그리드, 가격표 열 및 균등하게 분할된 바닥글 섹션의 패턴입니다. flex-grow를 다른 열보다 높여서 한 열에 더 많은 공간을 제공하거나 아래의 CSS 블록을 완전히 동일하게 분할하기 위해 생성된 그대로 복사하세요.