时间戳

首页 > 解决方案 > 如何将 flexbox 元素移动到另一行？

css - 如何将 flexbox 元素移动到另一行？

问题描述

该页面的元素在桌面上排成一行。在移动版中，中间的一个元素要换行，flex怎么能做到这一点呢？

введите сюда описание изображения

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

标签： cssflexbox

解决方案

您可以尝试如下：

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

@media screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
  }
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

推荐阅读