换行上的动态 flexbox答案

【问题标题】：Dynamic flexbox on wrap换行上的动态 flexbox
【发布时间】：2021-12-23 15:12:05
【问题描述】：

我目前有以下

HTML

<div>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

我想用flexbox来实现以下布局。

Goal View

桌面工作，移动看起来像这样 不正确

Current / Incorrect view

【问题讨论】：

使用@media在不同的屏幕上拥有动态flexbox
我认为使用网格更容易实现目标

标签： html css reactjs flexbox

【解决方案1】：

使用flexbox 或使用grid 系统可以通过两种方式实现您想要的外观。但是，还有很多其他方法，但总的来说这些是我们的选择。

如果你想实现动态 flexbox，我建议使用网格而不是 flex

方法一（使用flexbox）

            .one ,.two,.three{
                height: 50px;
                width: 100px;
                margin: 20px;
                background-color: blue;
            }
            .main{
    
                display: flex;
            }
    
            @media only screen and (max-width: 368px) {
                .main{
    
                    display: block;
                    
    
                }
                .two{
                    position: absolute;
                    left:130px;
                    top:2px;
                    height: 120px;
                    background-color: red;
                }
            }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Method 1</title>
    </head>
    <body>
    
        <div class="main">
            <div class="one">Left</div>
            <div class="two">center</div>
            <div class="three">right</div>
        </div>
    </body>
    </html>

方法二（推荐）使用grid系统

.grid-container {
  display: grid;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 3;
  grid-row: 1;
}

@media only screen and (max-width: 368px) {
  .item1 {
    grid-column: 1 / span 2;
    grid-row: 1;
  }
  .item2 {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .item3 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <div class="grid-container">
    <div class="grid-item item1">Left</div>
    <div class="grid-item item2">Center</div>
    <div class="grid-item item3">Right</div>
  </div>

</body>

</html>

希望这可以帮助您实现目标，享受吧。

【讨论】：

非常感谢你！！！！！！
啊！总是乐于提供帮助。别提了，继续学习和分享