2017-12-22 24 views
2

궁극적으로 가운데 정렬 된 격자를 만들려고하지만 항목이 왼쪽 위 정렬됩니다. 나는 스타일 display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap;와 자식 컨테이너를 추가 한 후 초래 고정 폭과 하위 항목의 무리를 추가 한 후 text-align: center 또는 display: flex; justify-content: center; 및 중 하나에, 즉 (1 개) 부모 컨테이너를 만들 생각 http://jsfiddle.net/Ae8Wv/1306/어떻게 flex 컨테이너의 너비를 자식의 너비까지 줄입니까?

: 여기

은 재생의 내가 찾고있는 것.

하지만 항목 목록을 처리하는 flex 컨테이너는 행 중 가장 긴 너비의 자동 너비를 사용하지 않고 가능한 최대 너비로 확장한다는 사실을 추측합니다. 너비를 감싸기 전에 100 % +++++

이 해결 방법이 있습니까? 인 flexbox 작업을하는 동안 메인 축과 교차 축과 비트 혼란스러워 보인다 Centered Grid - Inner Grid align left - NO Javascript - NO Medias Queries

+0

확인이 질문에 https://stackoverflow.com/questions/47479571/how-to-center-block-of-inline-blocks 우리는 어쩌면 당신은 몇 가지 아이디어를 –

답변

1

: 같은 문제를 보여주는이 답변으로 인해이없는 것처럼

는 것 같습니다.

사용 flex-direction: rowjustify-content: center 100 % 폭 (기본값)을 복용하지 않고 수평를 중앙에.

또는

사용 flex-direction: columnalign-items: center 100 % 폭 (기본값)을 복용하지 않고 수평를 중앙에.

희망이 도움이됩니다!

http://jsfiddle.net/Ae8Wv/1307/

+0

I를 얻을 것이다, 거기에 유사한 문제에 직면 미안해 나는 더 명확하지 않았지만 주황색 정사각형 안에 보라색 모서리의 양쪽 모서리에 같은 폭을 만들기 위해 노력했다. 그래서 오렌지색 정사각형은 각 행의 첫 번째와 마지막 모서리 사이에서 동일한 길이를 갖는다. 죄송 시간 낭비 –

+0

http://jsfiddle.net/Ae8Wv/1310/ 한 번 확인 – varun