Question

0

269

Views

Flex container: Is there a way stretch the first item's height when container wraps

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>

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/

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T17:54:22.474Z

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

*,
::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>

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.

*,
::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>

0

269

Flex container: Is there a way stretch the first item's height when container wraps

2 answers

0

DEMO

0

Find remote jobs

Andres GPT