CSS-L2-031 / Flex 응용

grow 비율 배분

초급

문제

너비 300px인 .row를 Flex로 만들고 .a와 .b의 남는 공간을 1:2로 배분하세요. 둘의 basis는 0, min-width는 0입니다.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

확인할 조건

첫 항목
둘째 항목

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<div class="row" style="width:300px"><div class="a">A</div><div class="b">B</div></div>
</body>
</html>

목표 화면

힌트

서로 다른 콘텐츠 기준 크기의 영향을 제거하세요.

해설·정답 보기

basis=0에서 남는 공간을 grow 비율로 나눕니다.

.row{display:flex}.a,.b{flex-basis:0;min-width:0}.a{flex-grow:1}.b{flex-grow:2}

모르는 문법은 코드 사전에서 ↗

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

풀이 결과

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.

← 같은 난이도 목록 다음 문제: repeat 열 반복 →