flex:auto 요소의 하위 목록 너비를 설정하는 방법

Question

안녕하세요. CSS 질문이 있습니다. 두 개의 열이 있는데 오른쪽(B) 열의 너비는 100px로 고정되어 있고 왼쪽(A) 열은 나머지 너비를 채워야 합니다. 또한 A열에는 가로로 추가된 하위 구성 요소 목록이 있습니다.

문제는 하위 컴포넌트를 추가할 때 A열의 너비가 길어지고 B열의 너비가 낮아진다는 것입니다.

A열의 너비를 초과하는 경우 A열의 맨 아래 줄에 하위 구성 요소를 추가하려면 어떻게 해야 하나요?

• 자식 요소의 수가 적은 경우
• 자식 요소 수가 증가하는 경우(그대로)
• 자식 요소 수가 증가하는 경우(TO-BE)

Answer 1

Flex 대신 디스플레이 그리드를 사용할 수 있습니다. 그리드를 사용하면 항목이 동적인지 정적인지 정의할 수 있습니다.

예:

으아악 으아악

grid-template-columns의 1fr은 여유 공간을 나타냅니다. 즉, 두 번째 요소의 100px을 제외한 모든 공간이 첫 번째 요소로 채워집니다.

Answer 2

전체 컨테이너와 A 모두에 flex-wrap을 사용하고 A 상자의 너비를 calc(100% - 100px)로 설정합니다.

으아악 으아악