같은 행에 있는 div 사이의 공간을 최대화하고 고유한 경우 중앙에 배치하려면 어떻게 해야 합니까?

Question

나는 flexbox을 사용하여 축소된 상위 컨테이너 안에 두 개의 컨테이너를 표시하고 있습니다.

• 상위 컨테이너가 충분히 커서 두 div가 나란히 있을 때 가능한 한 멀리 나타나기를 원합니다.
• 부모 div 缩小并且第二个 div가 줄어들고 두 번째
가 감싸면 가로 중앙에 나타나기를 원합니다.

justify-content: space- Between ，这有助于它们尽可能远离地显示，但当第二个 div현재 상위 컨테이너에서 justify-content: space- Between을 사용하고 있는데, 이는 가능한 한 멀리 표시되도록 도와주지만 두 번째

가 래핑될 때 중앙에 위치하지 않습니다.

div 上使用 justify-content: space- Between이것은 상위에서 justify-content: space- Between을 사용하는 현재 솔루션의 모습입니다

:

상위 div가 더 넓으면 예상대로 표시됩니다

상위 div가 더 좁으면 줄바꿈되지만 둘 다 가운데 정렬 대신 왼쪽 정렬됩니다

이상적으로는 다음과 같아야 합니다.

상위 div가 더 넓으면 그 사이의 공간이 최대화됩니다

상위 div의 폭이 더 좁아지면 두 div가 가로로 중앙에 배치됩니다.

flexbox 中完成，但可以使用 grid 完成，假设两个孩子 divs 是固定宽度，但在我的情况下，孩子们的 width다양한 CSS 트릭을 시도했지만 이 문제의 핵심 제한은 React와 같은 외부 프레임워크를 사용하지 않고 순수 CSS를 사용하여 수행해야 한다는 것입니다. 나는 6년 전에 이 SO를 찾았는데 비슷한 것에 대해 이야기하고 있었고

에서는 어떻게 할 수 없지만 두 자녀

가 고정 너비라고 가정하고 grid를 사용하여 수행할 수 있지만 내 경우에는 어린이의 너비가 고정되지 않았습니다.

내 코드의 읽기 쉬운 버전은 다음과 같습니다.

으아악 으아악

중요 사항🎜: HTML 객체에서만 직접 속성을 지정할 수 있습니다. 클래스를 생성하기 위한 CSS 파일이 없기 때문에 코드 조각에서 ID를 사용하고 있습니다. 왜냐하면 ID가 본질적으로 제가 할 수 있는 작업의 한계이기 때문입니다. 백엔드에서 프런트엔드로 전달되어 거기에 표시될 HTML 문자열을 작성 중입니다. 나는 이것이 모범 사례나 좋은 사례가 아니라는 것을 알고 있지만 이것이 문제의 기술적 한계입니다. 🎜

Answer 1

그래서 귀하가 게시한 이미지를 바탕으로 CSS에서 @media 쿼리를 사용하여 어린이가 더 작은 화면에 표시되도록 하고 있다고 가정합니다. 그렇다면 다음을 시도해 보세요:

으아악 으아악