inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

CSS 레이아웃 - flex & grid

flex-direction, flex-wrap, flex-flow

flex-box 하위 요소 아이템들은 자동적으로 높이값 flex-box 높이값과 같아진다고했는데,

992

경이

작성한 질문수 15

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 강의를 듣던중 flex-box 안에 있는 하위 요소들이 자동적으로 flex-box 높이 값을 먹는다고 했는데 실제로,
<ul class="container"> <li class="item">호랑이</li> <li class="item">고양이</li> <li class="item">냥냥이</li> <li class="item">강아지</li> <li class="item">고슴도치</li> </ul>

 

.container { display : flex} 적용했을경우 li 태그들이 container 와 높이가 같은걸 확인 할 수있었습니다. 그런데 왜

  <div class="container">
      <div class="item">호랑이</li>
      <div class="item">고양이</li>
      <div class="item">냥냥이</li>
      <div class="item">강아지</li>
      <div class="item">고슴도치</li>
    </div>

인경우 container 하위 요소 div 들은 자신의 높이값을 유지하나요 ?

HTML/CSS flex

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴이에요.

flexbox 컨테이너의 높이를 설정하지 않을 경우, 하위 아이템들은 자동으로 컨테이너의 높이를 따라가게 됩니다. 이는 flexbox의 동작 원리 중 하나입니다. 하지만 이 동작은 block-level 요소인 <div>에서만 일어납니다. 그래서 <li> 태그의 경우에는 컨테이너의 높이를 따라가는 것이 아니라, 자신의 내용에 따라 높이가 결정되어 표시됩니다.

따라서, <div> 태그를 사용할 경우에는 해당 요소들의 자신의 높이값을 유지하게 됩니다. 만약 <div> 대신 <li> 태그를 사용하고 싶다면, <li> 태그를 display: inline-block으로 설정하거나, 추가적인 스타일링을 통해 원하는 높이를 설정해주셔야 합니다.

잘 이해되지 않는 부분이 있다면 더 자세한 내용을 알려주세요. 감사합니다.

part3. spy 쪽 / part3,part4 강의자료

0

32

2

최종 코드

0

40

2

Open AI 결제

0

40

2

figma 파일을 받을 수가 없어요

0

48

1

다운로드 연결이 되지 않을 때는 어떻게 해야할까요?

0

37

1

Visual Studio Code 대신 Pycharm 써도 되나요?

0

42

2

커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?

0

57

1

구글 서치콘솔 도메인 소유권 확인 실패

0

40

2

antigravity로 하던 작업 이제 visual code로 하면 되는 거죠?

0

59

1

다음 강의 얼른 올려주세요

0

44

2

일반 강의와 차이점?

1

53

1

중요하진 않지만 설명하신부분에서 안된부분..

1

37

1

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

0

65

2

stopPropagation()에 대해서 질문 있습니다.

0

50

2

뉴스페이퍼 싱글템플릿 모바일 화면 디자인 질문

0

41

2

노션에 20.Contact가 없어요

0

47

2

검색엔진 차단 noindex

0

51

2

파트9 강의는 언제 오픈하시나요

0

51

2

ZIP 파일

0

55

2

26강 13F 강의 불일치 및 질문 요청

0

69

3

state 객체로 묶기

0

47

1

XAMPP에서 Apache, DB 재기동 시 접속안되는 문제

0

42

2

Breadth (등락 비율) 분석

0

33

1

다운로드가 안됩니다.

0

317

1