div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

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

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Is there a way to make something like this work when the items wrap? Now item-3 wraps exactly below item-1. I want it to wrap below item-2

Fiddle Link: https://jsfiddle.net/kmajqrsx/

CodePudding user response：

You can try achieve this with margin-left: 100px, where 100px is width of the .item and add it to item 3.

Show code snippet

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

.flex-container ~ .item {
  margin-left: calc(var(--val)   2px);
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The second solution looks almost the same as MaxiGui, but we create a breakpoint with a media query and set min-content as the width.

Show code snippet

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

:root {
  --val: 100px;
}

.item {
  height: var(--val);
  width: var(--val);
}

/* 404px is 100px * 2   2px lefr-border   2px right-border */
@media screen and (max-width: 404px) {
  .flex-container {
    width: min-content;
    background-color: aquamarine;
  }
}
.flex-container ~ .item {
  margin-left: auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>

  <div class="item">item 3</div>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add margin-left: auto; to last item:

DEMO

div {
  border: 1px solid #d3d3d3;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

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

.flex-container > .item{
  margin-left:auto;
}

<div class="flex-container">
  <div class="flex-container nowrap">
    <div class="item">
      item 1
    </div>
    <div class="item">
      item 2
    </div>
  </div>

  <div class="item">
    item 3
  </div>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>