How to Start a New Line with a Particular Item with Flexbox

How to start a new line with a particular item with Flexbox?

The gist of having n items in a row with flexbox is that padding and margin must also be considered because you are wrapping the flexbox. I made the following changes in your code:

• for wrapping a flexbox, you need to give flex-wrap: wrap on the flexbox container,

• to get 4 items per row, you can use flex-basis as 25% and adjust for the margin using calc,

• to get the rows with less that 4 items fill the available space, you can consider flex-grow: 1 on the flex items too,

• also consider adding box-sizing: border-box on the element* so that the padding is included in the width (and therefore in flex-basis)

You can find a similar question here: arranging 5 items in a row. See demo below:

div {

  margin: 5px;

  border: 1px solid pink;

  padding: 5px;

  font-family: arial, sans-serif;

  font-size: 14px;

}

.contenidor {

  width: 760px;

  display: flex;

  flex-wrap: wrap; /* wrapping flexbox */

}

div[class*=element] {

  /*width: 100%;*/

  padding: 2px 30px 5px 2px;

  box-sizing: border-box; /* adjusts for padding */

  flex-grow: 1; /* expand to fill remaining space */

  flex-basis: calc(25% - 10px); /* 4 items per row, adjust for the 5px margin */

}

.element5 {

  background-color: red;

}

<div class="contenidor">

  <div class="element1">bloque 1</div>

  <div class="element2">bloque 2</div>

  <div class="element3">bloque 3</div>

  <div class="element4">bloque 4</div>

  <div class="element5">bloque 5</div>

 </div>

How to start a new line and align the newline with another item within flexbox?

You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation

<div class="parent">
  <div class="unique-wrapper">
    <div class="unique_element">First</div>
  </div>
  <div class="child-wrapper">
    <div class="child">Second</div>
    <div class="child">Third</div>
    <div class="child">Fourth</div>
    <div class="child">Fifth</div>
  </div>
</div>

Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 30%.

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

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

.child {
  width: auto;
  background-color: CornflowerBlue;
  padding: 10px 10px 10px 10px;
}

Here is my codepen if you want to play with the code.

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>

CSS flex, how to display one item on first line and two on the next line

You can do something like this:

.flex {

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.flex>div {

  flex: 1 0 50%;

}

.flex>div:first-child {

  flex: 0 1 100%;

}

<div class="flex">

  <div>Hi</div>

  <div>Hello</div>

  <div>Hello 2</div>

</div>

Wrap element to new line/row using flexbox

Your code is fine but missing two things.

1. Use flex-wrap: wrap to
   create a new row. Modify the width of the first two items to be
   present in a single row.

2. For the last two items, you need to nest it inside a container and
   then wrap them again.

Manipulate the dimension(width, height) and margin values to achieve the perfect/suitable layout.

JSfiddle Demo

* {

  margin: 0;

  padding: 0;

}

body {

  background: #232323;

  padding: 10px;

}

#wrap {

  display: flex;

  width: 86vw;

  height: auto;

  box-sizing: border-box;

  margin: 0 auto;

  flex-wrap: wrap;

  background: #232323;

  /* Added */

}

.item1,

.item2 {

  width: 48%;

  /* Modified */

  height: 24.5vw;

  background: #4add69;

  margin-bottom: 10px;

}

.item1 {

  margin-right: 10px;

}

.item2 {

  margin-left: 10px;

}

.item3 {

  width: 55%;

  height: 40vw;

  background: #d56c6c;

  margin-right: 10px;

}

.nested-items {

  display: flex;

  width: 42%;

  flex-wrap: wrap;

  align-content: space-between;

}

.item4,

.item5 {

  background: lightblue;

  width: 100%;

  height: 49%;

}

<div id="wrap">

  <div class="item1"></div>

  <div class="item2"></div>

  <div class="item3"></div>

  <div class="nested-items">

    <div class="item4"></div>

    <div class="item5"></div>

  </div>

</div>

flexbox order but start at new line?

You can try this

.root {

  display: flex;

  flex-direction: column;  /* Add this */

}

.content {

  order: 2;

}

<div class="root">

  <div class="title">Menu A</div>

  <div class="content">Menu A content</div>

  <div class="title">Menu B</div>

</div>

---

Related Topics