선생님 질문좀 드리겟습니다. ㅠ

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)

작성

235

제가 flex1로 주면 basis값이 0으로 바뀌어서 습관적으로 grow1로 주곤 했었는데요 근데 이번 예제에선 grow1로 주면 화면이 깨지는데요 그래서 basis를 0 으로 따로주니까 먹네요 ㅠ 무슨 차이일까요 ㅠ 이해가 잘안되는 부분이라서요 ㅠ 강의와 좀 어긋난 질문이지만 궁금해서 여쭈어봅니다 ㅠ

jquery HTML/CSS

답변 2

코딩웍스(Coding Works)

지식공유자

flex: 1; 이라고 주는건 플렉스 속성 3개를 축약형으로 표현한 것 입니다.
곧, flex: 1 이라는건

flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

그래서 flex: 1; 이라고 간편하게 쓰지만 실은 flex: 1 0 auto; 와 동일하니다.

코드와 결과 화면이 없어서 이 정도 답변만 드려야겠네요~

Youngjae Choi

어,,저도 지난번 강의 들으면서 flex:1; 개념이 나와서

다른 블로그 통해서 찾아보니,

flex: 1 1 0; 과 동일하다고 하더라구요.

(flex: flex-grow flex-shrink flex-basis;)

즉,

기본값은

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

이지만,

flex: 1; 로 단축해서 적으면

flex-grow: 1;

flex-shrink: 1;

flex-basis: 0;

이라던데,

어떤게 맞나요?

물론, 여기서 그렇게 중요한 문제는 아닌것 같지만,

어느정도 개념을 짚는게 좋을것 같아서요.

인프런 커뮤니티 질문&답변

선생님 질문좀 드리겟습니다. ㅠ