How to Change Flexbox Wrap

How to change the flex order when wrapping

You can make b element full width with flex: 0 0 100% and change order to order: 2 with media queries DEMO

* {  box-sizing: border-box;}body, html {  margin: 0;  padding: 0;}.content {  display: flex;  flex-wrap: wrap;}.b {  background: lightblue;}.a, .b, .c {  border: 1px solid black;  flex: 1;  padding: 10px;}@media(max-width: 768px) {  .b {    flex: 0 0 100%;    order: 2;  }}

<div class="content">  <div class="a">A</div>  <div class="b">B</div>  <div class="c">C</div></div>

How to change flexbox wrap?

If to use Flexbox, and without script, you could create ghost elements, so they fill out the space on the last line.

So for a possible column length of 4, you need 3 ghost element and so on.

It is also possible to use the pseudo elements, which will decrease the needed ghost's by 2.

.card {    text-align: center;    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;    max-width: 300px;    margin: 2rem;    padding-bottom: 1rem;}.card:empty {    width: 300px;    box-shadow: none;    margin: 2rem;    padding-bottom: 0;}
.container {  padding-right: 15px;  padding-left: 15px;  margin-right: auto;  margin-left: auto;
}
.recipe-grid {  display: flex;  flex-wrap: wrap;  justify-content: space-around}

<div class="container">  <div class="recipe-grid">        <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>         <div class="card">      <img src="https://www.edamam.com/web-img/40b/40bfe88c879112dfc1786938c6c36832.jpg">      <h3> Egg beef sandwich </h3>      <p> 604 kcal - totally vegan </p>    </div>    
    <div class="card"></div>    <div class="card"></div>    <div class="card"></div>      </div></div>

CSS flex-wrap how to make the height do not stretch

The default direction of flex is row, and when you use flex-wrap: wrap push overflowed element downed to another row, and the row height will default always equal to the highest element of that row, that why you seeing the element having that gap.

This can be done if you change the flex direction to column and give the wrap element a fixed height so it push overflowed element to it right, from top to bottom.

.wrap {  /*Added these*/  height: 300px;  flex-direction: column;  /*-----------*/  display: flex;  align-items: baseline;  align-content: space-around;  flex-wrap: wrap;   background-color: lightblue;
}
.box {  display: flex;  background-color: tomato;  box-sizing: border-box;  border: 1px solid #C4C4C4;  height: 100px;  width: 45%;  margin-top: 15px;}
.box1, .box5 {  height: 20px;}

  <div class="wrap">    <div class="box box1">box1</div>    <div class="box box2">box2</div>    <div class="box box3">box3</div>    <div class="box box4">box4</div>    <div class="box box5">box5</div>    <div class="box box6">box6</div>  </div>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Flexbox: how to wrap a flex item once the width of another flex item is 0?

You can approximate this by using a big flex-shrink on the first container. This will give more priority to the first container for the shrink effect.

.wrapper {
  display: flex;
  justify-content: space-between;
  border: 1px solid red;
  max-width: 600px;
}

.flex-wrapper {
  display: flex;
  min-width: 0;
  flex-shrink:99999;
}

.header {
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  column-gap:10px; /* you can use gap with flexbox*/
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div class="header">
      Lorem ipsum dolar sit amet constructeur
    </div>
  </div>
  <div class="actions">
    <button>
      button1
    </button>
    <button>
      button2
    </button>
    <button>
      button3
    </button>
    <button>
      button4
    </button>
  </div>
</div>

Change flex direction on wrap

You can use media-queries to change behavior

@media (max-width: 500px) {
    #wrapper {
        flex-direction: column;    
    }
    #right-content {
        display: flex;
    }

    section {
        flex: 1;   
    }
}

See updated fiddle — http://jsfiddle.net/shurshilin/usLxshro/1/

Hope it'll help you.

Flexbox item wrap to a new line

If you look at this great answer you'll notice that the only cross-browser way (without 2 line break limit) is inserting 100%-width empty blocks ("line-breaks"). So for similar markup this will look like

.flex {  display: flex;  flex-wrap: wrap;  border: 2px solid red;}
.item {  width: 50px;  height: 50px;  margin: 5px;  border: 2px solid blue;}
.line-break {  width: 100%;}

<div class="flex">  <div class="item"></div>  <div class="item"></div>  <div class="item"></div>  <div class="line-break"></div>  <div class="item"></div>  <div class="item"></div>  <div class="line-break"></div>  <div class="item"></div>  <div class="line-break"></div>  <div class="item"></div>  <div class="item"></div>  <div class="item"></div></div>

Is there a way to change the order of items when wrapping?

Here is an idea using float, yes float. Resize the blue container and see the result:

.box {
  width: 50%;
  border: 4px solid blue;
  margin: 8px;
  text-align: justify;
  font-size:0; /* this will make sure the pseudo element won't have any size */
  overflow: auto;
  resize: horizontal;
}
.box > * {
  font-size:initial; /* we reset the font for child element */
  margin:8px;
  box-sizing:border-box;
}
/* the below is used with text-align:justify to have the correct alignment on wrap */
.box::before {
  content:"";
  display:inline-block;
}
.box::after {
  content:"";
  display:inline-block;
  width:100%;
}
/**/
.a {
  max-width: 100px;
  width: calc(100% - 16px);
  height: 60px;
  float:left; /* we float a */
}

.b {
  width: 70px;
  height: 30px;
  display: inline-block;
}

.c {
  height: 100px;
  width: calc(100% - 16px);
  max-width: 240px;
  float:left; /* and we float c */
  clear:left; /* don't forget this to make "c" always below "a" */
}

<div class="box">
  <div class="a" style="border: 4px solid red;">a</div>
  <div class="c" style="border: 4px solid orange;">c</div>
  <div class="b" style="border: 4px solid green;">b</div>
</div>