CSS - Flex 레이아웃 문제

Question

헤더는 플렉스 레이아웃을 사용합니다. 기본 IOS의 레이아웃과 유사하게 검색 상자를 가로 중앙에 배치하고 싶습니다.

---

왼쪽과 오른쪽 내용의 영향을 받지 않고 여전히 가로 중앙에 있습니다.

이전에 구현한 기억이 있는데 flex.css를 사용할 때 잊어버렸습니다. 이것을 사용하여 구현하는 방법을 확인하세요.

Answer 1

으아악

Flex 레이아웃에 대해 자세히 알아보려면 http://www.ruanyifeng.com/blo...

를 참조하세요.

Answer 2

간격을 사용하여 세 가지 요소만 직접 퍼뜨릴 수 있습니다

https://jsfiddle.net/straybug...

---

나중에 업데이트한 내용

은 왼쪽과 오른쪽 내용의 영향을 받지 않으며 여전히 가로 중앙에 위치합니다.

영향을 받지 않기 때문에 절대값을 추출한 후 중앙에 위치시키는 방법밖에 없습니다.

https://jsfiddle.net/straybug...

Answer 3

주로 사용하는 align-items: center
데모입니다

Answer 4

가운데 위치에 절대 위치 지정을 사용하세요. 왼쪽과 오른쪽 너비가 다르면 중간 위치에 영향을 미칩니다. 으아악