래핑된 하위 요소에 맞게 컨테이너 축소

Question

저는 다음과 같은 상황에서 flexbox가 어떻게 작동하는지(작동해야 할까요?...) 알아내려고 노력하고 있습니다.

으아아아 으아아아

JSFiddle입니다

문제는 요소를 수용할 공간이 충분할 때 아이들 사이에 간격이 균일하고 멋지고 꽉 조이는 아이가 생긴다는 것입니다. (첫 번째, 최상위 div 블록)

그러나 하위 항목에 공간이 충분하지 않고 텍스트가 줄바꿈하기 시작하면 모든 것이 이상한 방향으로 진행됩니다. 하위 항목은 더 이상 꼭 맞지 않으며, 래핑 후에도 플렉스 하위 항목 주위에는 여전히 충분한 공간이 있습니다. 더 이상 적합하지 않으며 주변 공간이 실제로 작동할 기회가 없습니다(두 번째 div 블록)

하지만 자동 줄 바꿈이 발생하는 곳에 수동 줄 바꿈을 추가하면 모든 것이 "해야 하는" 방식으로 배치됩니다... (하단, 세 번째 블록)

내가 원하는 것은 항상 아이들을 자신의 상자(검은색 테두리) 안에 꼭 맞게 두는 것입니다. 그리고 남은 공간은 내가 걱정하는 한 수동으로 줄 바꿈을 추가하지 않고도 아이들 사이에 균등하게 분배되는 것입니다(이것은 옵션이 아닙니다)

이게 가능한가요? ...

Answer 1

나의 변화된 모습을 자세히 살펴보세요 Fiddle:

• .holder width 到 max-width （在 .v 카테고리)
• 수정됨 .holder 以 wrap 和 space-around 해당 하위
• 명확성을 위해 2개의 .v 수업
을 더 추가했습니다.
• 삭제되었습니다
的
• 그리고 가장 중요한은 flex: 0 0 添加到 .child.child
에 flex: 0 0을 추가하는 것입니다.

Flexbox는 거의 항상 max-width，这比width더 유연하게 설정해야 합니다. 필요한 것에 따라 결과가 좋아 보입니다 .children 的行为方式，修改 flex: 0 0 中的 flex-grow 和 flex-shrink 来满足您的需求。 （flex: 1 0)

...자바스크립트가 필요하지 않습니다...

Codrops Flexbox Reference는 Flexbox 레이아웃을 이해하는 데 매우 유용합니다.

Answer 2

CSS에서 상위 컨테이너는 하위 컨테이너가 언제 래핑되는지 알 수 없습니다. 그래서 내부적으로 무슨 일이 일어나고 있는지 무시하고 계속해서 크기를 확장합니다.

즉, 브라우저는 초기 캐스케이드에서 컨테이너를 렌더링합니다. 자식이 래핑할 때 문서를 리플로우하지 않습니다.

이것이 컨테이너가 더 좁은 레이아웃으로 축소되지 않는 이유입니다. 오른쪽의 예약된 공간에서 알 수 있듯이 아무것도 포장되지 않은 것처럼 진행됩니다.

가로 공백의 최대 길이는 컨테이너가 존재할 것으로 예상하는 요소의 길이입니다.

아래 데모에서는 창의 크기가 수평으로 조정되면서 공백이 왔다 갔다 하는 것을 볼 수 있습니다. DEMO 强>

JavaScript 솔루션(여기 및 여기 참조)... 또는 CSS 미디어 쿼리(여기 참조)가 필요합니다.

텍스트 줄 바꿈을 처리할 때 경우에 따라 컨테이너에 text-align: right가 도움이 될 수 있습니다.