flex-basis가 예상대로 작동하지 않습니다.

Question

저는 flex-basis가 요소의 크기를 결정한다는 것을 알고 있습니다.

아래 예제에서 모든 상자의 크기를 100px로 동일하게하려고합니다. 플렉스 기반을 사용하는 것만으로 효과를 얻지 못합니다. 여기

.each_box { 
    -webkit-flex-grow: 0; 
    -webkit-flex-shrink: 0; 
    -webkit-flex-basis: 100px; 

    flex-grow: 0; 
    flex-shrink: 0; 
    flex-basis: 100px; 

    background-color: yellow; 
    height: 50px; 

    border: 1px solid black; 

} 

Plnkr : http://plnkr.co/edit/LvrrzHWIw1tPGwK05bCU

Answer 1

는 폭을 추가 width:100px; flex-basis은 증가 또는 감소 할 기본 비율을 제공합니다. 부모가 display:flex을 갖는 요소, 즉 -

Answer 2

flex-grow, flex-shrink, flex-basis 특성은가요 성 컨테이너요소에 영향을 미친다.

display:flex 요소의 내부에 직접 플렉스 관련 속성을 적용하려면 each_box div를 배치해야합니다.

는 특히, 마크 업 (오른쪽 + 파이어 폭스에서 "검사"타격 노란색 된 div 중 하나를 클릭에서) 다음과 같습니다 : 당신은 display:flex로 스타일 container있어

<div class="container"> 
    <!-- ngRepeat: stock in stockList --> 
    <div class="ng-scope" ng-repeat="stock in stockList"> 
    <div class="each_box ng-binding"> 
    0-FB/100 

,하지만 좋은하지 않습니다 each_box 요소는 손주이므로 display:block ng 범위로 플렉스 컨테이너에서 분리되었습니다.

따라서 ng-scope 래퍼를 제거하거나 display:flex으로 지정해야합니다.