inflearn logo
강의

講義

知識共有

CSS レイアウト - flex & grid

flex-direction, flex-wrap, flex-flow

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

1005

e12402508

投稿した質問数 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

communityai8509

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

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

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

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

푸터에 있는 카테고리 폰트 컬러 어떻게 바꾸나요?

0

15

1

장치 의존성과 CSR

0

26

1

순수 함수 / 순수 컴포넌트

0

18

1

css box-sizing 관련 질문

0

31

2

여태 만들던걸 다른 도메인으로 옮길 수도 있을까요?

0

24

1

node.js 설치 (LTS버전)

0

24

1

Cursor & Antigravity 소개 및 설치

0

30

2

뉴스페이퍼 테마 관련

0

33

1

지우지 말아야할걸 지운상태로 저장해버렸어요....

0

31

1

24번 수업에 나온 창은 무슨 프로그램인가요

0

32

1

Desktop모드-header영역 제작에서 제공해드린 폰트와 이미지

0

27

1

span 태그에 여백이 들어간 것 같은데 왜 그런건가요?

1

53

5

1-2 주가 데이터 수집 (OHLCV) 강의 질문 드려요

0

43

2

뉴스페이퍼 스킨을 꼭 사야하나요? 링크주소도 못찾겠어요

0

43

2

자료실

1

41

2

저는 일단 워드프레스로 블로그를 만들어 보려고

0

27

2

cafe24에서 했다가 fastcomet으로 변경하려 하는데요 문제가 생겼습니다

0

31

2

html / css 기초는 있습니다..

0

50

2

ReactScriptExample 관련 질문

0

40

1

class 이름을 section__title이라고 짓는 것에 대해서

0

52

2

수업자료와 노션 공유 문제

0

66

3

'CSS Level 3: grid'의 정리본 PDF도 올려주시면 좋을 듯 합니다.

0

60

2

경력기술서는 어떤 방향이 좋을까요?

0

65

2

다운로드가 안됩니다.

0

326

1