여백 조정이있는 Flexbox

Flexbox + 여백 문제가 발생하여 잘 모르겠습니다. 나는 그것이 플렉스 쿼크 (flex-quirk)라고 추측하고 있지만 다른 누군가가 이것을 알아 차리고 해결 방법이 있는지를 알 수있을 것이라고 생각했다.여백 조정이있는 Flexbox

아래의 CodePen에서 버킷 행을 flex: 1;에 설정하고 margin-left: 20px;을 설정 한 것을 볼 수 있습니다.

아래 내용 영역은 flex: 2; 및 flex: 1;이고 margin-left: 20px;은 버킷과 같습니다.

두 영역 모두 첫 번째 여백을 오프셋하기 위해 왼쪽으로 20px 당기는 컨테이너가 있습니다.

CodePen Example Here

당신이 볼 수 있듯이 - 두 개의 1/3의 div의는 1 2/2/3의 사업부와 일치하지 않습니다. 여백을 제거하면 모든 줄이 완벽하게 정렬되지만 여백은 너무 작아집니다.

이러한 내용이 한 줄로 표시되게하려면 마진이없는 해결책을 찾아야합니까?

편집 : http://cl.ly/image/0z1z2j141V2X/Image%202014-12-19%20at%205.37.07%20PM.png

출처

2014-12-19 geebru

3 단계 '버킷'은 각각 20 픽셀의 여백을 가지고 있습니다. ''content-left''와''content- right''는 각각 20px의 여백을 가지고 있지만, 단지 2 개 밖에 없습니다. – szupie

여백 여기 문제, RESP 있습니다 : 이것은 당신이 잘못 정렬을 볼 수있는 나는 특별히 말하는 겁니다 영역입니다. (1200px - 20px - 20px) 중 1/3이 (1200px - 20px)의 2/3과 같지 않기 때문에이 여백만큼 상자 사이에 놓는 "거터"가됩니다.

이 문제를 해결하기 위해 자연스럽게 생각할 수있는 유일한 방법은 백분율 여백 값을 대신 사용하고 상자의 flex 속성에도 백분율을 사용하는 것입니다.

중간에 1 %의 여백을 사용하고 마지막 요소의 첫 번째 및 오른쪽 여백의 왼쪽 여백을 제거하고 flex: 32.667% (1/3의 100 % -2 %), 아래에 2/3 및 1/3 요소 (2/3 및 1/3의 100 % -1 %)에 대해 flex:66%/flex:32% 인 경우 http://codepen.io/CBroe/pen/YPWOJG

출처

2014-12-19 22:57:28 CBroe

그건 기본적으로 내 대체 시스템이 사용하고있는 것입니다 - 플렉스 값으로 퍼센티지를 사용하면 플렉스라는 정교함이 다소 제거됩니까? 마찬가지로, 본질적으로 유동적 인 레이아웃으로 만들지 않습니까? – geebru

약간의 주석을 무시한다. 여전히 크기 조정 부서에서 플렉스 레이아웃의 특권을 얻는다. 나는 이것을 해결책으로 간주 할 것이다. - 좋아 보인다, 고마워! – geebru

여백 조정이있는 Flexbox

답변

관련 문제