너비를 무시한 플렉스 아이템들

나는 잘 작동하는 웹 사이트의 반응 형 디자인에서 플렉스 박스를 사용하여 내 HTML에서 몇 가지 요소를 재조정했지만 요소들은 제대로 크기를 조정하지 않을 것이다.너비를 무시한 플렉스 아이템들

중단 점에서 home-promos div에 flex 클래스를 적용하고 요소를 재정렬했습니다. 이것은 올바르게 작동합니다.

div의 백분율 너비를 조정하려고하면 문제가 발생합니다. 그들은 50 %와 같은 특정 시점까지만 크기를 조정 한 다음 더 커지지 않습니다.

플렉스 박스를 사용하는 것이 더 나은 사람이라면 무엇이 문제인지 알 수 있습니까?

2016-06-14 Neil K

당신은 플렉스 컨테이너 (display: flex 또는 display: inline-flex)를 만들

.home-promos { 
 
    display: flex; 
 
} 
 
.home-promo-center { 
 
    order: 1; 
 
} 
 
.home-promo-left { 
 
    order: 2; 
 
} 
 
.home-promo-right { 
 
    order: 3; 
 
}

<div class="home-promos"> 
 
    <div class="home-promo-left"> 
 
    <div class="promo-left-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
    <div class="home-promo-center"> 
 
    <div class="promo-center-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
    <div class="home-promo-right"> 
 
    <div class="promo-right-content"> 
 
     *content* 
 
    </div> 
 
    </div> 
 
</div>

, 그것은 몇 가지 기본 설정으로되어 있습니다. 그 중입니다 :

flex-direction: row - 플렉스 항목이 정렬됩니다 수평
justify-content: flex-start - 플렉스 항목은 행의 시작에 스택됩니다
flex-wrap: nowrap - 플렉스 항목은 한 줄에 머물 강제
flex-shrink: 1 - 유연한 항목은 축소가 허용됩니다.

마지막 두 설정에 유의하십시오.

세 개의 div는 한 줄로 유지되어야합니다. 따라서, 결합 된 너비는 컨테이너의 너비로 제한됩니다.

또한 수축이 허용되어 컨테이너가 넘치지 않도록합니다. 이것은 또한 너비를 제한합니다.

당신이 이러한 초기 설정을 재정의 할 수 있습니다 각 플렉스 항목에 당신이 원하는 폭을 적용하려면 :

이

flex-wrap: wrap - 플렉스 항목은 새로운 라인
flex-shrink: 0

출처

2016-06-14 17:31:03

너비를 무시한 플렉스 아이템들

답변

관련 문제