Question

我要把一个容器一分为二。左边是文本，右边是图像。

问题是图像保持不变，不会因弯曲或使用媒体查询而缩小。

.container{   
display:flex;
   flex-direction: row;
    max-width: 40.25rem;
    margin: 0 auto;
    justify-content: flex-start;
    border: 1px solid red;
}

.place {
    display: flex;
    flex-basis: 160px;
    flex-direction: column;
    margin-left: 20px;
}    

@media only screen and (max-width: 600px) {

.place {
flex-basis: 100px;
}
}
.place > * { 
flex: 0 1 100%;
}

.place > * img { 
max-width: 100%;

}

<div class="container">
  <div class="content">
  of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div class="place">
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
   </div>
 </div>

Answer 1

即使我不清楚您的问题，似乎您仍在尝试将尺寸设置为放置，而没有获得期望的结果。

但是 place 设置了flex-shrink的默认值：1，并且由于可用空间减少了，因此 place 减少到了可用空间。 / p>

我已将其更改为不收缩，您确实可以设置这些尺寸

.container{   
display:flex;
   flex-direction: row;
    max-width: 40.25rem;
    margin: 0 auto;
    justify-content: flex-start;
    border: 1px solid red;
}

.place {
    display: flex;
    flex-basis: 160px;
    flex-direction: column;
    margin-left: 20px;
    flex-shrink: 0; /* added */
}    

@media only screen and (max-width: 600px) {

.place {
flex-basis: 100px;
}
}
.place > * { 
flex: 0 1 100%;
}

.place > * img { 
max-width: 100%;

}

<div class="container">
  <div class="content">
  of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div class="place">
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
    <a href=""> <img src="https://via.placeholder.com/150" /></a>
   </div>
 </div>

如果父级（使用flexbox）更改了尺寸，则flexbox容器内的图像（垂直对齐）不会更改尺寸

1 个答案: