CODEWITHSUNDEEP
cssflexbox
volna
volna

Reputation: 2610

Wrap children content respectively to main parent width

I wonder if there is a flex-way to create fluid like behaviour of the parent container: by moving red boxes n1 and n2 to the left of the blue box n3 and as a result moving the red box n3 to the left side of the container

.parent {
  display: flex;
  width: 525px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}
<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>

Upvotes: 0

Views: 86

Answers (1)

Temani Afif
Temani Afif

Reputation: 272589

You can use display:contents (https://caniuse.com/#feat=css-display-contents) on .child elements making the boxes behaving as they was child of the .parent element.

.parent {
  display: flex;
  width: 555px;
  flex-wrap: wrap;
  background-color: green;
}

.child {
  flex-wrap: wrap;
  display: flex;
  display:contents
}

.box {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.blue .box {
  background-color: blue;
}

.red .box {
  background-color: red;
}
<div class='parent'>
  <div class='child blue'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
  <div class='child red'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
  </div>
</div>

Upvotes: 2

Related Questions