처리중입니다. 잠시만 기다려주세요.
TTJ 코딩클래스
정규반 단과 자료실 테크 뉴스 코딩 퀴즈
더보기
인사이트 FAQ 유튜브 카페

로그인

| 비밀번호찾기

추가 정보 입력

서비스 이용을 위해 휴대전화 번호를 입력해주세요.

회원가입

무료 회원가입 가입비 없이 무료로 가입할 수 있습니다

이미 계정이 있으신가요?

비밀번호 찾기

퀴즈 / CSS / 문제

CSS Flexbox에서 flex: 1의 의미로 올바른 것은?

보통 MDN Web Docs
보기 및 정답
A flex-grow: 1, flex-shrink: 1, flex-basis: 0%의 축약이며 남은 공간을 균등하게 나눠 채운다
B 플렉스 아이템에 flex: 1을 설정하면 min-width가 자동으로 0이 되어 내용이 잘릴 수 있는 문제가 발생하지 않는다
C 플렉스 컨테이너에 flex-wrap을 설정하지 않아도 align-content 속성이 정상적으로 동작하여 효과가 나타난다
D flex: 1을 설정하면 flex-grow만 1로 지정되고 flex-shrink와 flex-basis는 기본값이 그대로 유지된다

해설

flex: 1은 flex-grow: 1, flex-shrink: 1, flex-basis: 0%의 축약형입니다. 이는 아이템이 기본 크기를 0으로 시작하되, 컨테이너의 남은 공간을 동등한 비율로 나누어 차지하겠다는 뜻입니다. 여러 아이템에 flex: 1을 주면 균등 분배됩니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기

관련 문제

CSS 속성 image-rendering의 값 중 'pixelated'의 효과는?
CSS
CSS :focus-visible과 :focus 선택자의 차이점은?
CSS
CSS에서 box-sizing: border-box를 적용하면 어떤 변화가 생기나요?
CSS
CSS contain 속성의 목적은 무엇인가요?
CSS
CSS 선택자 우선순위(Specificity)가 높은 순서로 올바르게 나열한 것은?
CSS