Flex는 복용하지 폭

Question

나는 다음과 같은 반응 플렉스 레이아웃하지만 .image-holder 올바른 폭을하지 않습니다 있습니다 - 단지 text-holder

.pdf-link-list { 
 
    list-style: none; 
 
    padding: 1em 0; 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.pdf-link-list .column { 
 
    width: 50%; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 
.pdf-link-list .link { 
 
    display: flex; 
 
    text-decoration: none; 
 
    align-items: center; 
 
    width: 100%; 
 
} 
 
.pdf-link-list .image-holder { 
 
    padding-right: 15px; 
 
    width: 35%; 
 
} 
 
.pdf-link-list .width100 { 
 
    width: 100%; 
 
} 
 
.pdf-link-list .text-holder { 
 
    flex-grow: 1; 
 
}

<ul id="laying-patterns-links" class="pdf-link-list"> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
</ul>

에 얼마나 많은 텍스트에 따라 크기를 조정할 것으로 보인다을 나는 .image-holder width과 flex-grow:1 .text-holder, 텍스트 홀더가 확장하는 동안 .image holder이 동일하게 유지해야했다 때문에 사람이 내가이 빠져 있어요 알고 있나요

, 나는 생각했다.

나는 그래서 그것이 방식으로 행동하는 이유를 이해하려는 플렉스에 새로 온 사람

편집

죄송 위의 이미지 보유자에 대한 고정 폭이 그냥 데모입니다 실제 값은 스 니펫에서 문제를 잘 나타내지 못했습니다. 이미지 홀더 폭의 실제 값은 다음과 같습니다

width: 35%; min-width: 100px; max-width:250px; (instead of width:150px;) 

왜 그 안에서 모든 이미지 크기가 동일한 경우 35 % 넓은 모든 이미지 홀더?

Answer 1

은 .image-holderflex:1 다음 img에서이

.image-holder에 제로로 flex-shrink 설정

.pdf-link-list { 
 
    list-style: none; 
 
    padding: 1em 0; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.pdf-link-list .column { 
 
    width: 50%; 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
} 
 
.pdf-link-list .link { 
 
    display: flex; 
 
    text-decoration: none; 
 
    align-items: center; 
 
    width: 100%; 
 
} 
 
.pdf-link-list .image-holder { 
 
    margin-right: 15px; 
 
    width: 35%; 
 
    min-width: 100px; 
 
    max-width: 250px; 
 
    flex: 1 
 
} 
 
.pdf-link-list .width100 { 
 
    max-width: 100% 
 
} 
 
.pdf-link-list .text-holder { 
 
    flex: 1 
 
}

<ul id="laying-patterns-links" class="pdf-link-list"> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Proin varius magna vitae magna porttitor tincidunt</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Sed vestibulum aliquet ligula, at suscipit libero</span> 
 
    </a> 
 
    </li> 
 
    <li class="column link-holder"> 
 
    <a href="#" class="track-event link" data-category="ProductPDFDownload" data-action="" data-label=""> 
 
     <span class="image-holder"><img src="http://placehold.it/250x359" alt="" class="width100"></span> 
 
     <span class="text-holder">Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing</span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 2

.image-holder 클래스의 경우 width에 추가로 min-width을 사용하십시오. 그렇게하면 해당 요소는 실제로는 적어도 150px입니다.

Answer 3

max-width:100%을 설정 제공합니다. 이렇게하면 플렉스 박스 내부에서 이미지 크기가 조정되지 않습니다. 기본적으로

flex-shrink: 0; 

는 값으로 크기를 조정하고 플렉스에 적응하기 위해 image-holder 허용 1로 설정됩니다.