Change the order of flex items when a line break occurs

Question

Change the order of flex items when a line break occurs

Is it possible to configure the line breaks so that the middle item is dropped instead of the last one? Also, how can I prevent elements a and c from breaking onto new lines?

    .container{
      width: 80%;
      height: 31em;
      margin: auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      background-color: lightgrey;
    }
    .a{ 
      flex: 1 0 20%; 
      min-width: 150px;
      height: 50%;
      background-color: pink;
    }
    .c{ 
      flex: 1 0 20%; 
      min-width: 150px;
      height: 50%;
      background-color: lightblue;
    }
    .b{ 
      flex: 1 0 60%; 
      min-width: 350px;
      height: 50%;
      background-color: lightgreen;
    }

    <div class="container">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
    </div>

html css

Answer 1

Answer №1

If the elements with classes .a and .c have a minimum width of 150px, and the element with class .b has a minimum width of 350px, they will all be displayed on a single row within the container as long as the container's width is at least 750px. Once the container's width falls below this threshold, the element with class .c will move to the next row.

Fortunately, there is a solution for this using CSS Container Queries.

Unfortunately, as of November 2021, support for this feature is limited, and we may need to wait a little longer before fully utilizing it (support).

That's why the code snippet provided below will only work in Chrome with the "Enable CSS Container Queries" feature flag enabled.

.container {
  width: 80%;
  height: 31em;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: lightgrey;
  
  container-type: inline-size;
}

.a {
  flex: 1 0 20%;
  min-width: 150px;
  height: 50%;
  background-color: pink;
}

.c {
  flex: 1 0 20%;
  min-width: 150px;
  height: 50%;
  background-color: lightblue;
}

.b {
  flex: 1 0 60%;
  min-width: 350px;
  height: 50%;
  background-color: lightgreen;
}

@container (max-width: 750px) {
  .b {
    order: 1;
  }
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

Answer 2

If the elements with classes .a and .c have a minimum width of 150px, and the element with class .b has a minimum width of 350px, they will all be displayed on a single row within the container as long as the container's width is at least 750px. Once the container's width falls below this threshold, the element with class .c will move to the next row.

Fortunately, there is a solution for this using CSS Container Queries.

Unfortunately, as of November 2021, support for this feature is limited, and we may need to wait a little longer before fully utilizing it (support).

That's why the code snippet provided below will only work in Chrome with the "Enable CSS Container Queries" feature flag enabled.

.container {
  width: 80%;
  height: 31em;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: lightgrey;
  
  container-type: inline-size;
}

.a {
  flex: 1 0 20%;
  min-width: 150px;
  height: 50%;
  background-color: pink;
}

.c {
  flex: 1 0 20%;
  min-width: 150px;
  height: 50%;
  background-color: lightblue;
}

.b {
  flex: 1 0 60%;
  min-width: 350px;
  height: 50%;
  background-color: lightgreen;
}

@container (max-width: 750px) {
  .b {
    order: 1;
  }
}

<div class="container">
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</div>

Change the order of flex items when a line break occurs

Answer №1

Similar questions

Retrieve the id of the clicked hyperlink and then send it to JQuery

The PHP language includes a print language construct for outputting text

D3 group of legendary elements

Using CSS to style multiple IDs within a class group

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

The functionality of jquery .serialize is not effective when used on forms that are generated dynamically

How can Rails resize images for display on views?

Javascript code creates a blur effect on webpage bodies

Automatically submit a PHP form if the input text box is left blank

What is the best way to align this content in a specific area?

AngularJS inputs using ng-model should be blank when in the pristine state

Tips for correctly cloning a table row:

Unable to insert menu links into the container

The issue persists as the ng-change directive fails to function despite the presence of ng-model in AngularJS

Using a background image in the navigation menu with CSS

Ways to extract information from a website using the data within a span element

Creating a wide mega dropdown menu using Bootstrap 5.2 for a full-width page

Utilizing Java to extract dynamically generated content from an HTML page

ul background transparency only works with absolute positioning if using a Transparent PNG

Hidden Bootstrap 4 Layout: Utilizing 2 Columns