Flexbox를 사용하여 요소를 왼쪽과 가운데 정렬

Question

Flexbox를 사용하여 하위 요소를 정렬하고 있습니다. 내가 원하는 것은 한 요소를 중앙에 배치하고 다른 요소를 왼쪽에 정렬하는 것입니다. 일반적으로 나는 margin-right: auto를 사용하여 왼쪽 요소를 설정합니다. 문제는 중앙 요소를 중앙에서 멀리 밀어내는 것입니다. 절대 위치 지정을 사용하지 않고도 이것이 가능합니까?

HTML 및 CSS

#parent {
  항목 정렬: 중앙;
  테두리: 1px 단색 검정;
  디스플레이: 플렉스;
  내용 정당화: 센터;
  여백: 0 자동;
  너비: 500px;
}
#왼쪽 {
  여백 오른쪽: 자동;
}
#센터 {
  여백: 자동;
}

  왼쪽

Answer 1

세 번째 빈 요소 추가:

으아악

및 다음 스타일:

으아악

왼쪽과 오른쪽만 성장할 것이고, 그 사실로 인해...

• 성장 요소는 두 개뿐입니다(비어 있어도 상관 없음). 그리고
• 둘 다 너비가 같습니다(사용 가능한 공간을 균등하게 분배합니다)

...중앙 요소는 항상 완벽하게 중앙에 위치합니다.

제 생각에는 이것이 허용된 답변보다 훨씬 낫습니다. 왜냐하면 왼쪽 콘텐츠를 오른쪽으로 복사하고 양쪽에서 동일한 너비를 얻기 위해 숨길 필요가 없기 때문입니다. 마법처럼 발생합니다(flexbox는 마술입니다).

---

실제 작업:

으아악 으아악

Answer 2

편집: 아래 Solo의 답변 을 참조하세요. 이는 더 나은 솔루션입니다.

---

Flexbox의 기본 아이디어는 컨테이너 내에서 가변 크기의 요소를 쉽게 정렬할 수 있는 프레임워크를 제공하는 것입니다. 따라서 요소의 너비를 완전히 무시하는 레이아웃을 제공하는 것은 의미가 없습니다. 본질적으로 이것이 절대 위치 지정의 목적입니다. 요소를 정상적인 흐름에서 빼내기 때문입니다.

내가 아는 한 position:absolute;를 사용하지 않고는 이 작업을 수행할 수 있는 좋은 방법이 없으므로 이를 사용하는 것이 좋습니다... 하지만 정말로 그렇게 하고 싶지 않거나 절대 위치 지정을 사용할 수 없다면 다음을 사용할 수 있을 것 같습니다. 다음 해결 방법 중 하나를 사용하세요.

---

"왼쪽" div의 정확한 너비 를 알고 있는 경우 justify-content 更改为 flex-start(왼쪽)을 넣은 다음 "가운데" div를 다음과 같이 정렬할 수 있습니다.

으아악

---

너비를 모르는 경우 오른쪽의 "왼쪽"을 복사하고 justify-content: space- Between;를 사용한 다음 새 오른쪽 요소를 숨길 수 있습니다. 분명히 말하면 이건 정말 정말 보기 흉합니다... 내용을 복사하는 것보다 절대 위치 지정을 사용하는 것이 더 좋습니다. :-)

으아악 으아악