使用flex根据窗口大小将内容显示为行或列[重复]答案

【问题标题】：Using flex to display content as row or column depending on window size [duplicate]使用flex根据窗口大小将内容显示为行或列[重复]
【发布时间】：2020-12-09 01:59:52
【问题描述】：

是否可以根据窗口大小将项目显示为列或行？像这样： desired-result

我想模仿图像。蓝色项目在他们自己的 div 中。现在，当调整窗口大小时，蓝色项目作为列移动到下一行。

这是 CSS 代码：

 .mainRedContainer{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5px;
  margin-bottom: 20px;
}

.orangeContainer{
padding: 10px;
height: 43vh;
margin-top: 20px;
background-color: #dee8f0;
}

.blueContainer{
  margin-top:20px;
  display: flex;
  flex-flow: column wrap;
}

.blueItems{
  min-width: 15vw;
  max-width: 17.5vw;
  max-height: 250px;
  background-color: rgb(195, 220, 236);
  margin-left: 10px;
  margin-right: 10px;
}

【问题讨论】：

你也应该添加html
css-tricks.com/snippets/css/a-guide-to-flexbox 看看这篇文章。
这能回答你的问题吗？ How to use particular CSS styles based on screen size / device 或 Switching CSS classes based on screen size.

标签： css

【解决方案1】：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;;
}

body {
  padding: 10px;
  border: 1px solid red;
}


.wrapper {
  display: grid;
  grid-template-columns: 8fr 4fr;
  grid-template-rows: auto;
  gap: 2rem;
}


.orangeContainer .orangeItem {
  background-color: orange;
  min-height: 200px;
  height: 100%;
}

.blueContainer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
}

.blueContainer .blueItem {
  background-color: blue;
  height: 200px;
}

@media (max-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .blueContainer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="orangeContainer">
      <div class="orangeItem">Item 1</div>
    </div>
    <div class="blueContainer">
      <div class="blueItem">Item 2</div>
      <div class="blueItem">Item 3</div>
    </div>
  </div>
</body>
</html>

【讨论】：

稍微解释一下可能会有所帮助。你的代码是如何解决问题的？
一般来说，在创建这个和类似的布局时，更喜欢网格评估而不是 flexbox。

【解决方案2】：

其实很简单。在这些情况下，您必须使用@media。例如，您希望它在尺寸小于 576 像素时更改。那么：

@media (max-width: 576px) { 
  .mainRedContainer{
   flex-direction: column;
   }
    
  .blueContainer{
   flex-flow: row wrap;
   }
 }

【讨论】：