垂直显示 div 行问题答案

【问题标题】：Displaying Row of Divs Vertically Issue垂直显示 div 行问题
【发布时间】：2021-01-30 00:37:40
【问题描述】：

我在让我的三个 div 框在移动视图中垂直显示时遇到了一点问题。在桌面/平板电脑视图中，我希望它们在一行中保留为三个 div，而在移动视图中，我希望它本质上是每行一个 div。

在 .container（在桌面视图的 THREE-NAV-SECTION（最后一部分）内，我有 display:flex 并且在移动视图中我将其设置为 display: block 我认为它会起作用。任何建议将不胜感激。

/* 36em = 577px*/
@media (max-width: 577px) {
  #three-nav-section {
    margin-left: 2%;
    margin-right: 2%;
  } /* Sets margins of three-nav-section */
  .container{
    display: block;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}
.container .thumbex {
  margin: 0px 8px 1.5%;
  width: 100%;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  outline: 2px solid white;
  outline-offset: -15px;
  background-color: rgb(122, 122, 122);
  box-shadow: 5px 10px 40px 5px rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  border: 1px solid black;
}
.container .thumbex .thumbnail {
  overflow: hidden;
  min-width: 250px;
  height: 300px;
  position: relative;
  opacity: 0.88;
  backface-visibility: hidden;
  transition: all 0.4s ease-out;
}
.container .thumbex .thumbnail img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 115%;
  width: auto;
  transform: translate(-50%, -50%);
  backface-visibility: hidden;
}
.container .thumbex .thumbnail span {
  position: absolute;
  z-index: 2;
  top: calc(150px - 20px);
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  padding: 1% 0% 1% 0%;
  margin: 0 25% 0 25%;
  text-align: center;
  font-size: 25px;
  color: white;
  font-weight: 300;
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.2px;
  transition: all 0.3s ease-out;
  border-radius: 12px;
}
.container .thumbex .thumbnail:hover {
  backface-visibility: hidden;
  transform: scale(1.10, 1.10);
  opacity: 1;
}
.container .thumbex .thumbnail:hover span {
  opacity: .65;
}

<!DOCTYPE html>
<html>
<head>
<title>KPM</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home-page.css?v=<?php echo time(); ?>">    
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet"> <!-- Google Font (nav links)-->
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@500&display=swap" rel="stylesheet"> <!-- Google Font (logo) -->
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet"> <!-- Google Font (three-nav-section) -->
<script src="javascript/responsive-nav.js?v=<?php echo time(); ?>"></script>
</head>
<body>
    
<section id="three-nav-section" class="three-nav-section">
<div class="container">
  <div class="thumbex">
    <div class="thumbnail"><a href="javascript:void(0)"> <img src="images/amazing-animal-beautiful-beautifull.jpg"/><span>About</span></a></div>
  </div>
  <div class="thumbex">    
    <div class="thumbnail"><a href="javascript:void(0)"><img src="images/pexels-fauxels-3183198.jpg"/><span>Contact</span></a></div>
  </div>
  <div class="thumbex">
    <div class="thumbnail"><a href="javascript:void(0)"><img src="images/pexels-photo-258109.jpg"/><span>Memorials</span></a></div>
  </div>
</div>
</section><!-- This section displays the three navigation options underneath the big home image -->

</body>
</html>

【问题讨论】：

小屏使用.container { display: block; }代替flexbox
你能去掉所有不相关的代码吗？这使得找到有问题的 CSS 变得非常困难。
这就是我现在的工作，删除了 flex-wrap: wrap;弹性方向：行；来自 .container 并更改了显示：块；从移动 .container 到 flex-direction: 列；我会为你删除不相关的代码。
@NathanBayne 请接受我的回答并在下方删除您的回答。这不是发布回复的正确方式。您的原始问题已正确修改。

标签： html css

【解决方案1】：

使用 flexbox，您可以将容器设置为在移动设备上显示flex-direction: column，在桌面或平板电脑上显示flex-direction: row。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

不需要显示块，因为您已经在使用弹性框，只需在移动视图上提供容器flex-direction: column;

【讨论】：

【解决方案3】：

您可以通过display: grid轻松实现这一目标

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
}

然后在您的媒体查询中将模板更改为：

.container{
    grid-template-columns: 1fr;
  }

【讨论】：