html - 使用 Flex 从移动设备到桌面的 1、2、3 列布局

Question

这就是我想要的:

我需要用 Flex 来做这件事。但我正在尝试的方法不起作用:

.content-wrapper,
.tablet-top,
.tablet-middle,
.tablet-bottom {
  display: flex;
  justify-content: center;
}


/*tablet*/

@media (min-width: 426px) and (max-width: 767px) {
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: row;
  }
  .content-wrapper {
flex-direction: column;
  }
}


/*mobile*/

@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper,
  /* added */
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: column;
align-items: center;
/* added */
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/>
  </div>
</div>

我们是否需要在 HTML 中添加另一个 div 来在桌面上单行显示 dog、cat 和 mouse ？

如果我们这样做，不会破坏响应能力吗？另外，我当前的代码似乎不适用于平板电脑 - 它应该会破坏 tablet-top、tablet-middle 和 tablet-bottom 分为三行。

Answer 1

首先你忘记了 , 在 CSS 第一行，你应该写:.tablet-middle, .tablet-bottom 而不是 .tablet-middle .tablet-bottom。

对于桌面，请像inline-flex，

在媒体查询的包装器上添加:

.content-wrapper{
    display:flex;
    flex-direction: column;
  }

演示

.content-wrapper{
  display: flex;
}

/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: column;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: row;
  }
}

<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/></div>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/></div>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/></div>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/></div>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/></div>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/></div>
  </div>
</div>

演示 - 2

.content-wrapper{
  display:flex;
  flex-wrap: wrap;
}
.content-wrapper > span{
  width:100%;
  max-width:33%;
  flex: 0 0 33%;
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper > span{
    width:100%;
    max-width:100%;
    flex: 0 0 100%;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper > span{
    width:100%;
    max-width:50%;
    flex: 0 0 50%;
  }
}

<div class="content-wrapper">
    <span><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" /></span>
</div>