수축 포장 플렉스 상자를 사용하여 플렉스 항목을 감싸서 중앙에 배치할 수 있습니다.

Question

내용이 담긴 플렉스박스가 있습니다. Flexbox를 해당 콘텐츠로 축소하는 방법은 무엇입니까? 내가 해결하려는 근본적인 문제는 flexbox를 중앙에 배치하는 것입니다. 이 이미지는 내 문제를 설명합니다.

이 목표를 어떻게 달성할 수 있나요? 순수한 CSS로 이것을 달성할 수 있습니까? Flexbox가 1개, 2개 또는 3개 열로 래핑되는지 미리 알 수 없습니다. 요소의 너비가 알려져 있습니다. 높이는 알려지지 않는 것이 좋지만 더 쉬우면 일정한 높이를 결정할 수도 있습니다.

width:min-content、width:max-content、width:fit-content도 inline-flex< /code>도 효과가 없는 것 같습니다.

JS 피들: https://jsfiddle.net/oznts5bv/

으아악 으아악

Answer 1

두 가지 예를 만들었습니다: display: flex; 和 display: grid;를 사용합니다. 두 번째 옵션이 더 적합할 수 있습니다:

으아아아 으아아아