플렉스 속기를 이해

Question

flex-growth :: it는 플렉스 항목이 동일한 행/열에있는 다른 플렉스 항목에 비례하여 증가 할 수 있음을 이해합니다.

나는 flex-shrink ::를 이해한다. 동일한 행/열에있는 다른 플렉스 아이템에 비례하여 플렉스 아이템을 축소 할 수있다.

flex-basis를 이해합니다 : 주 크기 값을 덮어 쓰고 너비 (또는 높이에 따라 방향에 따라 다름)를 설정합니다.

그러나, 나는 이해할 수 없다. flex-basis: auto || 0 등.

<div class="container"> 
    <div class="one item">Box 1</div> 
    <div class="two item">Box 2</div> 
    <div class="three item">Box 3</div> 
</div> 

과 CSS : 나는 그들이 모두 flex-grow: 1로 설정되어 있기 때문에 모든 세 개의 상자는, 같은 크기 것으로 예상

.container { 
    display: flex; 
} 

.item { 
    border: solid red 1px; 
    padding: 5px; 
} 

.one { 
    flex: 1 0 100px; 
} 

.two { 
    flex: 1 0 auto; 
} 

.three { 
    flex: 1 0 auto; 
} 

여기 내 코드입니다. 그러나이 경우가 아닐뿐만 아니라 상자 하나가 및 상자보다 크고 100px보다 큽니다.

플렉스 성장 비율과 상자 1의 플렉스 기반 비율이 무시 되더라도 크기가 고르지 않게되는 이유는 무엇입니까?

도움 주셔서 감사합니다.

Answer 1

이것은 "상대 플렉스"의 예입니다. 각 플렉스 항목의 flex-basis이 사용되고 나머지 공간이 추가됩니다.

100px 예를 들어 다른 두 개의 auto보다 큽니다. flex-basis을 고려한 후 사용 가능한 공간이 모든 상자에 고르게 추가됩니다. http://jsbin.com/gakeju/1/

이 http://www.w3.org/TR/css-flexbox-1/#valdef-flex-flex-basis

(다른 질문을 참조하지만, 명확히하기 :

이 상자 두 상자 1의 100 픽셀보다 큰 고유 폭이 때 발생하는 것입니다 당신이 원하는 경우 항목을 가지고 공백을 고려하지 않고 공간을 분배한다면 flex-basis를 0 (또는 0 %) 즉 flex: 1 0 0;으로 설정해야합니다. 예를 들어 의 항목이 모두 인 항목을 모든 상자가 시작하기 때문에 동일하게 만듭니다. flex-basis와 같은 문자를 입력 한 다음 공간을 할당하십시오.