html - 使用 flex 盒

Question

我使用 flex 盒子。我想将蓝色框放在右边缘，但是当它位于第二行时(当浏览器的窗口压缩时)它必须位于中心。你能帮帮我吗？

.main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main .left-items {
  display: flex;
  margin-bottom: 10px;
}

.main .left-items .item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 10px;
}

.main .right-item-wrapper {
  flex-grow: 1;
}

.main .right-item-wrapper .right-item {
  margin: auto;
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="main">
  <div class="left-items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="right-item-wrapper">
    <div class="right-item"></div>
  </div>
</div>

Fiddle Link

Answer 1

您可以向第一个容器添加一个大的 flex-grow ，当两个容器都在同一行时，它将把另一个容器推到右边，并且当有一个换行时，蓝色将居中:

.main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.left-items {
  display: flex;
  margin-bottom: 10px;
  flex-grow: 100;
}

.item {
  width: 100px;
  height: 100px;
  background: red;
  margin-right: 10px;
}

.right-item-wrapper {
  flex-grow: 1;
}

.right-item {
  margin: auto;
  width: 100px;
  height: 100px;
  background: blue;
}

<div class="main">
  <div class="left-items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="right-item-wrapper">
    <div class="right-item"></div>
  </div>
</div>
<div class="main">
  <div class="left-items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <div class="right-item-wrapper">
    <div class="right-item"></div>
  </div>
</div>