肖像的景观使1行4张图像转到4行1张图像

Question

我正在使用Flex，想在手机上的一行中放置4个图像。 在肖像中，它将图像加载在另一个下方。这些图像不大（我什至可以使它们很小！），即使在肖像中，它们也应该在屏幕上轻松适应。但是，当我去风景时，它们会根据需要加载一行。

这就是我目前所拥有的：

    <div class="flex-container">
        <div><img class="item" src="/images/personnel/person1.jpg" alt="pic1" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person2.jpg" alt="pic2" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person3.jpg" alt="pic3" style="width:auto;height:70px;"></div>
        <div><img class="item" src="/images/personnel/person4.jpg" alt="pic4" style="width:auto;height:70px;"></div>
    </div>

在我的CSS文件中：

  .flex-container {
    display: flex;
    background-color: rgb(220, 235, 250);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    padding: 5px;
  } 

要澄清，我希望它们在肖像和景观中一排。

我在CSS文件中也有此功能，但是我不确定这是否是行为的原因，因为我尝试进行flex方向行，但没有任何区别。

  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
    }
  }

Answer 1

这个如何为您服务

.flex-container {
overflow-x: scroll;
overflow-y: hidden;    
display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;  /* TWEENER - IE 10 */
display: -webkit-flexbox; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
} 

.item {
display: flex;
flex-direction: column;
padding: 0px;
margin: 5px;
}

   <div class="flex-container">
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic1" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/70x70" alt="pic2" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/150x70" alt="pic3" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic4" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic5" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/70x70" alt="pic6" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/150x70" alt="pic7" style="width:auto;height:70px;"></div>
    <div><img class="item" src="https://via.placeholder.com/110x70" alt="pic8" style="width:auto;height:70px;"></div>
    </div>

Answer 2

感谢您的建议。因此，我所做的是除了@Media部分之外，我没有更改任何内容，我将其做到了@Media（Max-Width：320px），这似乎有效！我仍然在绊倒自己的出路，所以我敢肯定，我的做法是错误的，但是我的目标是进行一些Udemy课程，然后再回来改进。