flex-basis

19.07.19 00:28 작성 조회수 150

flex-basis의 값은 항상 auto 아니면 0만 있는건가요?

또, flex-grow: 1; 이랑 flex-basis: 0;이 같이 있으면, flex-grow: 1 부분은 인식이 안되는건가요..?

인터랙티브 웹 개발 제대로 시작하기

CSS Flex

강의실 바로가기

답변 1

답변을 작성해보세요.

1분코딩

2019.07.23

컨테이너를 flex-wrap: wrap;으로 설정하시고,

자식 엘리먼트들의 flex-basis를 30%, 50% 이런 식으로 바꿔가면서 한번 테스트 해보세요~

flex-basis가 0이면, flex-grow가 인식이 안된다기보다는

flex-grow에 설정된 비율 그대로 폭이 결정됩니다.

이게 말로 설명하기가 조금 애매한데, 아래 영상의 9:40 지점부터 한번 봐보세요^^

[flex-basis 테스트 코드]

<!DOCTYPE html>

<html>

<head>

<style>

.container {

display: flex;

flex-wrap: wrap;

background: dodgerblue;

}

.item {

height: 100px;

margin: 10px 0;

flex: 1;

flex-basis: 50%;

background: red;

}

</style>

</head>

<body>

</div>

</body>

</html>