Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

Question

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

I have a segment with six elements.

For desktop, I would like to display 3 items per row; for medium devices, 2 items per row; and for mobile devices, only 1 item per row.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Here is the CSS:

.flex-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

Currently, it displays 3 items on desktop and 1 item on mobile. However, I am missing the 2 items per row on medium devices. What adjustments should I make in my code to achieve this layout?

html css flexbox

Answer 1

Answer №1

To create the layout, you can adjust the flex-basis property within media queries.

Here's how it works:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* extra styles for demonstration */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Check out the jsFiddle demo here

The first flex rule sets flex-grow to 1, allowing flex items to take up all available space.

With this setup, the width of each item specified by flex-basis no longer needs to follow conventional percentages like 33.33% or 50%. These values usually require manual adjustments, such as using calc(), to account for margins.

In this scenario, utilizing flex properties enables flex-grow to fill up any remaining space, requiring flex-basis only to determine when wrapping occurs.

For instance, setting flex-basis: 26% allows three items per row before a wrap is triggered, leaving ample room for margins. The flexibility of flex-grow handles any leftover space efficiently.

Answer 2

To create the layout, you can adjust the flex-basis property within media queries.

Here's how it works:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex: 1 0 26%;
}

@media ( max-width: 768px) {
  .flex-container > div {
    flex-basis: 34%;
  }
}

@media ( max-width: 320px) {
  .flex-container > div {
    flex-basis: 51%;
  }
}

/* extra styles for demonstration */
.flex-container > div {
  height: 50px;
  background-color: lightgreen;
  border: 2px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Check out the jsFiddle demo here

The first flex rule sets flex-grow to 1, allowing flex items to take up all available space.

With this setup, the width of each item specified by flex-basis no longer needs to follow conventional percentages like 33.33% or 50%. These values usually require manual adjustments, such as using calc(), to account for margins.

In this scenario, utilizing flex properties enables flex-grow to fill up any remaining space, requiring flex-basis only to determine when wrapping occurs.

For instance, setting flex-basis: 26% allows three items per row before a wrap is triggered, leaving ample room for margins. The flexibility of flex-grow handles any leftover space efficiently.

Answer 3

Answer №2

You're on the right track with your approach to media queries.. Just be cautious of the 'e' in .flex-conteiner, it should actually be .flex-container

From there, implement media queries and flex-basis for different screen sizes, like so:

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 768px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 50%;
    }
}

For larger screens, consider using a flex basis of 33%.

Answer 4

You're on the right track with your approach to media queries.. Just be cautious of the 'e' in .flex-conteiner, it should actually be .flex-container

From there, implement media queries and flex-basis for different screen sizes, like so:

@media only screen and (max-width: 768px) and (min-width: 320px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 100%;
    }
}

@media only screen and (max-width: 1200px) and (min-width: 768px){
    .flex-container {
        display: flex;
        justify-content: center;
        flex-basis: 50%;
    }
}

For larger screens, consider using a flex basis of 33%.

Answer 5

Answer №3

To adjust the flex-basis within the <div>, you can make changes directly. For a visual example, check out this link: https://example.com/example-link

Answer 6

To adjust the flex-basis within the <div>, you can make changes directly. For a visual example, check out this link: https://example.com/example-link

Answer 7

Answer №4

Yes, the previous responses are accurate. I recommend checking out my answer on a similar Stack Overflow thread: How to create a fluid child div relative to its parent.

Furthermore, it appears that there is an error in your media query and class selection; I suggest correcting it.

Answer 8

Yes, the previous responses are accurate. I recommend checking out my answer on a similar Stack Overflow thread: How to create a fluid child div relative to its parent.

Furthermore, it appears that there is an error in your media query and class selection; I suggest correcting it.

Flexbox design that adapts responsively to display 3 items per row, shifting to 2 items and finally

Answer №1

Check out the jsFiddle demo here

Answer №2

Answer №3

Answer №4

Similar questions

Google Chrome applying its unique style compositions

What is the best way to eliminate empty spaces from the container?

Creating a personalized login function in LaravelWould you like to learn how to

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

What is the best way to ensure a stable background image using CSS?

What is the typical output value that fluctuates?

Using Kendo UI Mobile, take advantage of a button to trigger the click action of another

What are the acceptable ID attribute values to use with JQuery selectors?

Incorporate JavaScript code into an Angular UI-Router view

The jQuery ajax request will only display the data in the HTML once

Make the table width 100%, but we don't want the central cell to be stretched

What is the method to alter the color of an SVG source within an image tag?

Functionality of JavaScript limited within a form

Displaying the Polymer Paper spinner when the page is still loading

Combining a Vuetify 2 toolbar and a navigation drawer, topped with an additional toolbar for added functionality

Challenges with KendoUI integration

Implementing jQuery to enable the selection of multiple options depending on user input

Troubleshooting CSS Animation Failure in Internet Explorer 11

Tips for creating the ultimate footer section on your webpage

Is it true that outerHeight(true) excludes margins?