Flexbox: Move Middle Element to The Next Line

Flexbox: move middle element to the next line

Something like this?

https://jsfiddle.net/wqLezyfe/2/

@media all and (max-width: 600px) {
  #wrapper{
    flex-wrap:wrap;
    height: 100px;
  }
  .center {
    width: 100%;
    order: 3;
  }

  .left{
    width: 50%;
  }
  .right{
    width:50%;
    order:2;

  }
}

How do I move an flexbox element to another line?

You can try like below:

.container {
  display: flex;
}

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

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

@media screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
  }
}

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

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>

How to specify line breaks in a multi-line flexbox layout?

The simplest and most reliable solution is inserting flex items at the right places. If they are wide enough (width: 100%), they will force a line break.

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

Keep the middle item centered when side items have different widths

If the left and right boxes would be exactly the same size, I get the desired effect. However when one of the two is a different size the centered box is not truly centered anymore. Is there anyone that can help me?

Here's a method using flexbox to center the middle item, regardless of the width of siblings.

Key features:

pure CSS
no absolute positioning
no JS/jQuery

Use nested flex containers and auto margins:

.container {  display: flex;}.box {  flex: 1;  display: flex;  justify-content: center;}
.box:first-child > span { margin-right: auto; }
.box:last-child  > span { margin-left: auto;  }
/* non-essential */.box {  align-items: center;  border: 1px solid #ccc;  background-color: lightgreen;  height: 40px;}p {  text-align: center;  margin: 5px 0 0 0;}

<div class="container">  <div class="box"><span>short text</span></div>  <div class="box"><span>centered text</span></div>  <div class="box"><span>loooooooooooooooong text</span></div></div><p>↑<br>true center</p>

Center one and right/left align other flexbox element

Below are five options for achieving this layout:

CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to item D.

Now this item is absolutely positioned within the flex container.

More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top and right to move this element into position.

li:last-child {  position: absolute;  top: 0;  right: 0;  background: #ddd;}ul {  position: relative;  padding: 0;  margin: 0;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}li {  display: flex;  margin: 1px;  padding: 5px;  background: #aaa;}p {  text-align: center;  margin-top: 0;}span {  background-color: aqua;}

<ul>  <li>A</li>  <li>B</li>  <li>C</li>  <li>D</li></ul><p><span>true center</span></p>

Moving column to next line using Flex Box

By default the flex-direction is row, you should change it to column and use flex-wrap:wrap (we can write it shortly using flex-flow:column wrap). Note that to make the third column jump to the next column, the .flex-container's height should be large enough to contain all the .first and .second but not enough to contain all 3 items. With just that, you can recognize that the .third expand/strecth the whole space (on the second column). So you can try setting its flex-grow:0 and use flex-basis:50%. Here is the code:

@media all and (max-width: 640px) {
  .flex-container {
    flex-flow:column wrap;  
    height:40px;   
  }    
  .third {
    flex-grow:0;
    flex-basis:50%;
  }
}

Demo.

Here is another solution using column box layout instead of flex-box, it works very well indeed.

Flexbox: Move Middle Element to The Next Line