css - 使用 flexbox 在移动设备中对齐项目

Question

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

标签： cssflexbox

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>