exclude the last item in flexbox from wrapping using the nowrap property

I have implemented flexbox nowrap on my container and I am wondering if it is possible to use CSS, without JavaScript, to push the last item in the container onto a new line at a specific width. This should be done using media queries and I am open to using additional HTML markup if necessary. Please note that there may be more than 3 items in the container, this example just illustrates with 3 items.

.container {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
}

@media (max-width: 700px) {
  
}
<div class="container">

  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>

</div>
htmlcssflexbox

Answer №1

When working with the current markup and utilizing the nowrap property, the only way to exclude the last item at a specific width is by applying position: absolute.

However, this approach would require a script to adjust the height of the container to avoid other elements from being positioned below it.

.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>

If a modification to the markup is allowed, one alternative solution is to wrap all items except the last one in a parent container and then toggle the flex-direction property with a media query.

To ensure that space-between layout works in both wrapped and unwrapped scenarios, a pseudo element is used in conjunction with setting the inner flex-parent to fill the remaining space using flex: 1.

Stack snippet

.flex-parent {
  display: flex;
  justify-content: space-between;
}
.container .flex-parent {
  flex: 1;
}
.container .flex-parent::after {
  content: '';
}  

@media (max-width: 700px) {
  .container.flex-parent {
    flex-direction: column;
  }  
  .container .flex-parent::after {
    display: none;
  }  
}


/* just for this demo, to create space between "container"'s */
.container + .container {
  margin-top: 30px;
}
<div class="container flex-parent">
  <div class="flex-item flex-parent">
    <div class="flex-item">
      ITEM 1
    </div>
    <div class="flex-item">
      ITEM 2
    </div>
    <div class="flex-item">
      ITEM 3
    </div>
  </div>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item 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>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>
<div class="container flex-parent">
  <div class="flex-item flex-parent">
    <div class="flex-item">
      ITEM 1
    </div>
    <div class="flex-item">
      ITEM 2
    </div>
  </div>  
  <div class="flex-item">
    ITEM Last
  </div>
</div>

Answer №2

If you want to disable nowrap in the media query and adjust the flex-basis of your items, you can do so by setting flex-grow: 0; on your .flex-item elements. This will prevent them from scaling to the full width of the container.

For situations where you have a known number of elements, this approach works well. However, if you have an undefined count of elements, you may need to make use of flex-grow:0.

.container {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-between;
  padding:10px 0;
}

.container .flex-item{
  flex-basis:33%;
  box-sizing: border-box;
  padding: 5px 10px;
  flex-grow: 0;
}

.flexrow .flex-item {
  flex-grow: 1;
}
.dynamic .flex-item {
  flex-shrink: 1;
}
.onlythird  .flex-item, .onlylast .flex-item {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis:0;
  overflow:auto;
}

@media (max-width: 700px) {
  .container {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
  }

  .container .flex-item{
    flex-basis:50%;
  }
  
  .onlythird  .flex-item, .onlylast .flex-item {
    flex-basis: 0;
  }
  .onlylast .flex-item:last-child {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
  }
  .onlythird  .flex-item:nth-child(3) {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 100%;
    order:1;
  }
}

/* COLORS */

.flex-item {
  background: green;
}
.flex-item + .flex-item {
  background: red;
}
.flex-item + .flex-item + .flex-item {
  background: blue;
}
.flex-item + .flex-item + .flex-item + .flex-item {
  background: yellow;
}
.flex-item + .flex-item + .flex-item + .flex-item + .flex-item {
  background: pink;
}
<h1>Without grow</h1>
<div class="container">
  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>
</div>

<h1>With grow</h1>
<div class="container flexrow">
  <div class="flex-item">
    ITEM 1
  </div>
  <div class="flex-item">
    ITEM 2
  </div>
  <div class="flex-item">
    ITEM 3
  </div>
</div>

<h1>Dynamic count</h1>
<div class="container dynamic">
  <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>

<h1>Dynamic count ONLY break last item</h1>
<div class="container onlylast">
  <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>


<h1>Dynamic count ONLY break 3. item</h1>
<div class="container onlythird">
  <div class="flex-item">
    ITEM 1 asdasdasdasdasdasdasfasdasdsdasdasdasdasdasdasdasdasfasdasd
    asdasda sd asd asd sfasdf asdfasdfasd  fasd fsda fasd fsd fsd fasdf asdf asdf sdaf 
  </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Examining the scroll-down feature button

I'm currently experimenting with a scroll down button on my website and I'm perplexed as to why it's not functioning properly. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c ...

javascripthtmlcss

Leveraging a common element throughout various partial views

In my ASP.Net MVC 3 application, I have various controllers and actions that display pop-up dialog windows for user input. One important aspect of these dialogs is the faded mask that appears behind them. Each dialog window control resides in a separate P ...

htmlasp.net-mvc-3partial-views

Having difficulty sending a value with %45 to a REST API

Currently, I'm encountering an issue within my ASP.NET MVC 5 application. The problem arises when I send the following JSON data to a third-party API, which includes a password field: "{\"operation\":{\"Details\":{\"RESOURCE ...

c#htmlasp.netjsonjson.net

Steps for inserting a script tag in an Angular component

My Angular/Typescript website needs to integrate a third-party script that generates a table. However, I'm facing issues with rendering the table within the home.component.html file. I've managed to embed the script, but it doesn't seem to ...

javascripthtmlangulartypescriptembed

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

javascripthtmlcss

HTML: A peculiar table setup with an image displayed on the right side and text aligned to the left side. Strangely, the

Just starting out and seeking assistance <table style="border:none" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="border:none" valign="top" vertical-align:"top"; width="20%"> <div><img class= ...

htmlcss

Utilizing a constant variable and the setTimeout function to initiate an animated menu display

I'm currently utilizing jQuery to enhance my dropdown menu functionality by toggling the active class defined in my CSS. However, I've encountered a difficulty in adjusting the timeout for one of the elements. Below is some pseudo code to clarify ...

htmljquerycss

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

I've exhausted all available questions on this topic and attempted every solution, but my keyup function remains unresponsive. $(document).ready(function() { $(document).on('keyup', '.pollOption', function() { var empty = ...

javascriptjqueryhtml

Using Phonegap with Dreamweaver CS5.5

Can anyone tell me what version of Phonegap is used in Dreamweaver CS5.5? I attempted to update the default phonegap.js file with the newest one, but it resulted in errors. Would it be wise to replace the current phonegap.js file with the latest version? ...

jqueryandroidhtmlcordovadreamweaver

Resposiveness of force-directed graph is lost

const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...

javascriptcssd3.jssvg

The Bootstrap button is experiencing difficulties with resizing

When utilizing the bootstrap CDN in conjunction with another bootstrap CSS example file located in the static directory, I encountered an issue while attempting to create a file input and submit button for a form. Despite my efforts, I was unable to adjust ...

htmlcssformsbootstrap-4

What is the best way to inform the DOM about newly generated elements dynamically?

When making an AJAX call and generating HTML on the backend side, the result may not display with the desired properties such as cursor styling. For example, using jQuery to render JSON data: $(data.message).each(function (index, value) { $('#sta ...

javascriptjqueryhtmlcssdom

Is there a way to search for text and highlight it within an HTML string using Ionic

Welcome everyone! I am currently utilizing Ionic to load an article from a local HTML string. <ion-content padding> <p [innerHTML]="url"></p> </ion-content> The 'url' variable contains the local HTML string. My goal ...

htmltypescriptionic-framework

Place the Div directly above a distinct Div

Hey there! I'm currently working on positioning one div on top of another div programmatically (using javascript or css). These divs are completely separate and have the following structure: <div class="bottom"> <img src="image"></i ...

javascripthtmlcss

Adjust CardMedia Images to match their content in the new MUI 5 version

I’m looking to have my images fully fill the CardMedia component. However, because they are of varying sizes, some end up being cropped like this: https://i.stack.imgur.com/JHIrT.png Additionally, when resizing the images, some get cut off as well: ht ...

javascripthtmlcssreactjsmaterial-ui

Tips for Avoiding Line Breaks in CSS Divs

I am currently designing a website menu with items such as Home, Contact us, and About us. Each item is styled with a background color and text size of 125X30. I initially used the float property in CSS to align them correctly in a single line from left ...

phphtmlcsslayout

Is there a way to use PHP in place of the <form> tag in HTML in order to submit a form from a script and remain on

Currently, the code in my form looks like this: <form action="https://www.paypal.com/cgi-bin/webscr" target="_BLANK" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="paypal@ ...

phphtmlpostcurlpaypal

The date selection tool is failing to appear on the screen

I successfully created a date picker using Bootstrap. Here is the code: <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <s ...

jqueryhtmlbootstrap-4

Is a Bootstrap 3 Calendar Available?

I am attempting to design a calendar using Bootstrap 3.3.7 that features consistent square dates, similar to this example: https://i.sstatic.net/dYWbj.jpg It is important to me that each date is displayed in a square format. Here is what I have come up w ...

phphtmlcsstwitter-bootstrap

Mozilla Firefox does not have the capability to support preloading

I am having an issue with preloading CSS sheets. I attempted to preload the CSS sheet using the preload attribute in HTML. It works fine on Google Chrome, but unfortunately, it does not work on Firefox. <head> <link href=assets/css/master.c ...

htmlcssfirefoxoptimizationpreload