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

220
January 16, 2018, at 4:23 PM

This question already has an answer here:

  • How to exclude the first item in a flexbox wrap? 1 answer
  • How to specify an element after which to wrap in css flexbox? 4 answers

I have four HTML elements displayed on a single line using CSS flexbox (codepen here). At a certain screen width (e.g. 800 px), I would like to ensure the first element displays on one line, while the remaining three elements wrap to the next line (as in this screenshot). Can I accomplish that with a CSS media query and/or additional HTML? If so, what is the proper way of doing so? My existing code is below:

HTML

<div class="cart-cb">
  <div>Continue Browsing</div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

CSS

.cart-cb {
  display:flex;
  justify-content: flex-end;
  width: 100%
}
Answer 1

You could change its initial width with the flex-basis: 100% to occupy the whole row when the break happens:

.cart-cb { 
  display: flex; 
  justify-content: flex-end; 
  flex-wrap: wrap; /* enables wrapping */ 
  /*width: 100%; by default*/ 
} 
 
@media screen and (max-width: 800px) { 
  .cart-cb > div:first-child { 
    flex-basis: 100%; 
    text-align: right; 
  } 
}
<div class="cart-cb"> 
  <div>Continue Browsing</div> 
  <button>Property For Sale</button> 
  <button>Land For Sale</button> 
  <button>Villa Rentals</button> 
</div>

Answer 2

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/

Answer 3

You could wrap the buttons in a container - that will keep them grouped together when the line wraps.

Also include flex-wrap property...

.cart-cb { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: flex-end; 
  width: 100%; 
} 
 
/* at 800px screen width force wrap */ 
 
@media (max-width: 800px) { 
  .buttons { 
    width: 100%; 
    text-align: right; 
  } 
}
<div class="cart-cb"> 
  <div> 
    Continue Browsing 
  </div> 
  <div class="buttons"> 
    <button>Property For Sale</button> 
    <button>Land For Sale</button> 
    <button>Villa Rentals</button> 
  </div> 
</div>

Answer 4

Try this code Check Demo https://jsfiddle.net/JentiDabhi/s48r3ere/

HTML

<div class="cart-cb">
  <div class="label-div">
      Continue Browsing
  </div>
  <button>Property For Sale</button>
  <button>Land For Sale</button>
  <button>Villa Rentals</button>
</div>

CSS

.cart-cb {
    display: flex;
    justify-content: flex-end;
    width: auto;
    flex-wrap: wrap;
    float: right;
}
div.label-div {
    display: block;
    flex: 100%;
}
.cart-cb button{
  flex: auto;
}
Rent Charter Buses Company
READ ALSO
cannot run project in server [on hold]

cannot run project in server [on hold]

When i am running project in localhost it is working fine, while running in my server i am getting following error

161
How to detect Safari, Chrome, IE, Firefox and Opera browser?

How to detect Safari, Chrome, IE, Firefox and Opera browser?

I have 5 addons / extensions for FF, Chrome, IE, Opera and Safari

620
Multiple navbar header for multiple navbar-collapse

Multiple navbar header for multiple navbar-collapse

How to make multiple navbar-header for multiple navbar-collapseWhen click navbar-header #1, show first navbar-collapse, then when I click navbar-header #2, show next navbar-collapse

184
how to make clicking feeling on mobile with css

how to make clicking feeling on mobile with css

I have been thinking for a long time, but I have not found a solutionSome mobile sites have a hover-like clicking feeling when they click on links and buttons

240