안녕하세요. CSS 질문이 있습니다. 두 개의 열이 있는데 오른쪽(B) 열의 너비는 100px로 고정되어 있고 왼쪽(A) 열은 나머지 너비를 채워야 합니다. 또한 A열에는 가로로 추가된 하위 구성 요소 목록이 있습니다.
문제는 하위 컴포넌트를 추가할 때 A열의 너비가 길어지고 B열의 너비가 낮아진다는 것입니다.
A열의 너비를 초과하는 경우 A열의 맨 아래 줄에 하위 구성 요소를 추가하려면 어떻게 해야 하나요?
P粉1460805562023-09-10 16:00:46
Flex 대신 디스플레이 그리드를 사용할 수 있습니다. 그리드를 사용하면 항목이 동적인지 정적인지 정의할 수 있습니다.
예:
grid-template-columns의 1fr은 여유 공간을 나타냅니다. 즉, 두 번째 요소의 100px을 제외한 모든 공간이 첫 번째 요소로 채워집니다.
P粉4191647002023-09-10 00:33:20
전체 컨테이너와 A 모두에 flex-wrap을 사용하고 A 상자의 너비를 calc(100% - 100px)로 설정합니다.