How to Exclude the First Item in a Flexbox Wrap

How to exclude the first item in a flexbox wrap?

Is there a way to exclude the first item in a flex wrap other than reorder the markup?

After some initial confusion we now understand that what is actually required is for the content to wrap after the first div.

Obviously, the simplest method to achieve this is for the first div to be 100% wide of the parent.

.view-container .view-content {  display: flex;  flex-wrap: wrap;  justify-content: space-between;}.filterbox {  flex: 0 0 100%;}

<div class="view-container">  <div class="view-content">    <div class="filterbox">FILTER</div>    <div class="flex-item">      Flex-ITEM    </div>    <div class="flex-item">      Flex-ITEM    </div>    <div class="flex-item">      Flex-ITEM    </div>  </div></div>

Exclude first flex item from wrap

The main problem here, with the existing markup is, as soon as the item 4 an 5 break line, they will go to a row of their own, and there is no Flexbox properties to make them bump up as you want (like float'd element would).

With CSS Grid you would be able to do this though, but it also has less browser support than Flexbox does.

The simplest and best Flexbox solution here is to wrap the 2-5 items. With this you will avoid any limits that fixed height's, absolute positioning, etc. can cause if to keep the existing markup, and get a fully dynamic, responsive solution.

Stack snippet

footer {    max-width: 250px;    display: flex;    align-items: center;    justify-content: center;    padding: 0 10px;}footer .footer-flex {    display: flex;    align-items: center;    justify-content: center;    flex-wrap: wrap;    padding: 0 10px;}footer .footer-flex .flex-item {    margin-left: 10px;}
/* styles for this demo */footer {    border: 1px solid red;}footer + footer {    max-width: 400px;}footer .footer-flex .flex-item {    padding: 10px;    border: 1px solid red;}

<footer>    <a class='flex-item'><img src="http://placehold.it/100" alt="Sample Image"></a>    <div class='footer-flex'>      <a class='flex-item'>Two</a>      <a class='flex-item'>Three</a>      <a class='flex-item'>Four</a>      <a class='flex-item'>Five</a>    </div></footer>
Wider footer
<footer>    <a class='flex-item'><img src="http://placehold.it/100" alt="Sample Image"></a>    <div class='footer-flex'>      <a class='flex-item'>Two</a>      <a class='flex-item'>Three</a>      <a class='flex-item'>Four</a>      <a class='flex-item'>Five</a>    </div></footer>

Flexbox wrap - Skip the first element

If you don't want to change your markup, you could do like this.

And to make it more responsive, I added a media query.

.form-group {  display: flex;  flex-wrap: wrap;  position: relative;  padding-left: 150px;}.form-group label {  position: absolute;  left: 0;  bottom: 0;  width: 150px;}.form-group input {  flex: 1 auto;  max-width: 200px;  margin-right: 10px;  margin-top: 10px;}
@media screen and (max-width: 380px) {
  .form-group {    padding-left: 10px;  }
  .form-group label {    position: relative;    flex: 1 auto;    width: 100%;    margin-top: 10px;  }
}

<form>  <div class="form-group">    <label>Test Label</label>    <input type="text">    <input type="text">    <input type="text">    <input type="text">    <input type="text">  </div></form>

CSS: How can I ensure flex items wrap to the next line--after the first item--at a certain screen width?

Use the media query to apply flex-wrap:wrap on the flex container and flex:0 0 100% on the first child.

This way you don't need additional HTML markup, and no need to change anything on your code but the media query.

@media (max-width: 800px) {
  .cart-cb{
    flex-wrap:wrap;
  }
  .cart-cb div{
    flex: 0 0 100%;
    text-align:right;
  }
}

https://jsfiddle.net/378b4yLy/

Removing margin from flex items when they wrap

Update in late 2021

Now the gap property also works with Flexbox (on newer browser versions).

* {
  margin: 0;
  padding: 0;
}

html, body {
  box-sizing: border-box;
}

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 25px;
  border: 1px solid;
  padding: 5px;
}

.tags {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;                          /* added */
}

.tag {
  padding: 5px;
  background-color: #76FF03;
  /* margin: 0 5px 5px;                 removed */
}

<div class="container">
  <ul class="tags">
    <li class="tag item-1">Tag Item 1</li>
    <li class="tag item-2">Tag Item 2</li>
    <li class="tag item-3">Tag Item 3</li>
    <li class="tag item-4">Tag Item 4</li>
    <li class="tag item-5">Tag Item 5</li>
    <li class="tag item-6">Tag Item 6</li>
    <li class="tag item-7">Tag Item 7</li>
    <li class="tag item-8">Tag Item 8</li>
    <li class="tag item-9">Tag Item 9</li>
    <li class="tag item-10">Tag Item 10</li>
    <li class="tag item-11">Tag Item 11</li>
    <li class="tag item-12">Tag Item 12</li>
    <li class="tag item-13">Tag Item 13</li>
    <li class="tag item-14">Tag Item 14</li>
    <li class="tag item-15">Tag Item 15</li>
    <li class="tag item-16">Tag Item 16</li>
  </ul>
</div>

flexbox exclude last item from nowrap

With the existing markup, and when using nowrap, the only way to exclude the last item at given width would be to make it position: absolute.

That would on the other hand need a script to adjust the container's height, to prevent elements later in markup to end up beneath it (the positioned one).

.flex-parent {  position: relative;  display: flex;  justify-content: space-between;}
@media (max-width: 700px) {  .flex-item:last-child {    position: absolute;    left: 0;    top: 100%;  }  }

/* just for this demo, to create space between "container"'s */.container + .container {  margin-top: 30px;}

<div class="container flex-parent">  <div class="flex-item">    ITEM 1  </div>  <div class="flex-item">    ITEM 2  </div>  <div class="flex-item">    ITEM 3  </div>  <div class="flex-item">    ITEM Last  </div></div><div class="container flex-parent">  <div class="flex-item">    ITEM 1  </div>  <div class="flex-item">    ITEM 2  </div>  <div class="flex-item">    ITEM 3  </div>  <div class="flex-item">    ITEM 4  </div>  <div class="flex-item">    ITEM 5  </div>  <div class="flex-item">    ITEM Last  </div></div><div class="container flex-parent">  <div class="flex-item">    ITEM 1  </div>  <div class="flex-item">    ITEM 2  </div>  <div class="flex-item">    ITEM Last  </div></div>

First-child full-width in Flexbox

You can set the :first-child to a width of 100%, and the rest of the childs :not(:first-child) to flex: 1.

To put them on multiple lines, use flex-wrap: wrap on the container:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
}

.child:first-child {
  width: 100%;
}

.child:not(:first-child) {
  flex: 1;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

How to Exclude the First Item in a Flexbox Wrap