使用flexbox在移动设备中对齐项目[重复]

Question

当涉及到使用 flexbox 的移动尺寸时，我希望这些项目与图片中的对齐方式相同。

Answer 1

flex-wrap 是可以将 silbing 项目移动到下一行的那个。

使用flex-basis可以调整每个项目的宽度。

您只需选择需要将手机与桌面分开的@media。

.parent {
  display: flex;
  flex-flow: row wrap;
}

.div1, .div2, .div3 { 
  flex-grow: 1;
  flex-shrink: 0;
}

.div1 { flex-basis: 100%; }
.div2, .div3 { flex-basis: 50%; }

@media (min-width: 700px) {
/* select desired media */
  .div1, .div2, .div3 { flex-basis: auto; }
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
</div>

Answer 2

虽然 Gridbox 更适合这项任务，但可以通过以下代码在 Flexbox 中完成：

<div class="container">
  <div class="a">1</div>
  <div>2</div>
  <div>3</div>
</div>

.container {  
  display: flex;

  div {
    width: 300px;
    height: 500px;
    border: solid 1px red;
  }  
}

@media (max-width: 800px) {

  .container {
    flex-wrap: wrap;

    .a {
      width: 100%;  
    }
  }
}

关键是在较小的视口启用换行并调整要跨越整行的 div 的宽度。