Creating a flexible layout using Flexbox

Question

Creating a flexible layout using Flexbox

Currently, I have successfully coded a layout using Grid, but now I am looking to achieve the same layout using FlexBox due to compatibility issues with IE-11. Unfortunately, IE-11 does not support Grid properly.

Let's simplify things and focus only on xs screens. Imagine that I have 6 cards:

<div class="container">
  <div class="card1"> card 1 </div>
  <div class="card2"> card 2 </div>
  <div class="card3"> card 3 </div>
  <div class="card4"> card 4 </div>
  <div class="card5"> card 5 </div>
  <div class="card6"> card 6 </div>
</div>

I want the structure to be flexible so that I can add or remove cards dynamically, and the layout adjusts automatically based on the number of cards present.

The default size of each card should match its container's width. For instance, if there is only one card, it should occupy the full width.

<div class="container">
  <div class="card1"> card 1 </div>
</div>

If there are two cards, the width should be divided between them equally, similar to using flex-grow.

<div class="container">
  <div class="card1"> card 1 </div>
  <div class="card2"> card 2 </div>
</div>

However, I encounter an issue with flex-grow as I cannot control how the cards are stacked. In the case of having 6 cards on an xs screen, I want them to form 3 rows with 2 cards in each row, which cannot be achieved solely with flex-grow.

For medium-sized screens, I would like the cards to be displayed in 2 rows of 3 cards each. And for xs screens, the layout should consist of 3 rows with 2 cards in each row.

I understand that FlexBox is one directional, but perhaps there are tricks or tips that I am not aware of. You can view my codepen example at https://codepen.io/jamie-jamier/pen/yLewWqy. However, please note that it does not fully meet my requirements. When you resize the screen to 500px, you'll notice that the use of flex-wrap results in displaying one card per row.

css flexbox

Answer 1

Answer №1

Based on my interpretation of your needs, I have made some adjustments to your CSS code and included a media query for medium-sized screens. Please review to see if it meets your requirements.

.container {
  display: flex;
}

.card {
  flex: 1;
  height: 300px; 
}

.card1 { background-color: lemonchiffon; }
.card2 { background-color: lightblue; }
.card3 { background-color: mediumspringgreen; }
.card4 { background-color: khaki; }
.card5 { background-color: orchid; }
.card6 { background-color: darkgray; }

/* Styles for medium devices */
@media only screen and (max-width: 1000px) {
  .container {
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 33.33%;
  } 
}

/* Styles for extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .card {
    flex: 1 1 50%;
  } 
}

<div class="container">
  <div class="card card1"> card 1 </div>
  <div class="card card2"> card 2 </div>
  <div class="card card3"> card 3 </div>
  <div class="card card4"> card 4 </div>
  <div class="card card5"> card 5 </div>
  <div class="card card6"> card 6 </div>
</div>

Answer 2

Based on my interpretation of your needs, I have made some adjustments to your CSS code and included a media query for medium-sized screens. Please review to see if it meets your requirements.

.container {
  display: flex;
}

.card {
  flex: 1;
  height: 300px; 
}

.card1 { background-color: lemonchiffon; }
.card2 { background-color: lightblue; }
.card3 { background-color: mediumspringgreen; }
.card4 { background-color: khaki; }
.card5 { background-color: orchid; }
.card6 { background-color: darkgray; }

/* Styles for medium devices */
@media only screen and (max-width: 1000px) {
  .container {
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 33.33%;
  } 
}

/* Styles for extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .card {
    flex: 1 1 50%;
  } 
}

<div class="container">
  <div class="card card1"> card 1 </div>
  <div class="card card2"> card 2 </div>
  <div class="card card3"> card 3 </div>
  <div class="card card4"> card 4 </div>
  <div class="card card5"> card 5 </div>
  <div class="card card6"> card 6 </div>
</div>

Answer 3

Answer №2

up to this point, I struggle to come up with a solution without using JavaScript. I need something to calculate the number of elements and apply different styles based on that count, somewhat like the following:

var cards = $('.card').length;

if(cards <= 1){
  $('.card').addClass('justOne');
}else if(cards <=2){
  $('.card').addClass('twoCards');
}else{
  $('.card').addClass('moreThanTree');
}

.card { 
  height: 300px;
}

.justOne{
  width: 100%;
}

.twoCards{
  width: 50%
}

.moreThanTree{
  width: 33.333%;
}

.card1 { background-color: lemonchiffon; }
.card2 { background-color: lightblue; }
.card3 { background-color: mediumspringgreen; }
.card4 { background-color: khaki; }
.card5 { background-color: orchid; }
.card6 { background-color: darkgray; }


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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }

  .card {
    background-color: blue;
  } 
}

<div class="container" >
  <div class="card card1" > card 1 </div>
  <div class="card card2" > card 2 </div>
  <div class="card card3" > card 3 </div>
  <div class="card card4" > card 4 </div>
  <div class="card card5" > card 5 </div>
  <div class="card card6" > card 6 </div>
  <div class="card card5" > card 7 </div>
  <div class="card card6" > card 8 </div>
</div>

Take a look at this pen similar to yours (using jQuery):

https://codepen.io/francisco2016/pen/bGEZyQJ

Answer 4

up to this point, I struggle to come up with a solution without using JavaScript. I need something to calculate the number of elements and apply different styles based on that count, somewhat like the following:

var cards = $('.card').length;

if(cards <= 1){
  $('.card').addClass('justOne');
}else if(cards <=2){
  $('.card').addClass('twoCards');
}else{
  $('.card').addClass('moreThanTree');
}

.card { 
  height: 300px;
}

.justOne{
  width: 100%;
}

.twoCards{
  width: 50%
}

.moreThanTree{
  width: 33.333%;
}

.card1 { background-color: lemonchiffon; }
.card2 { background-color: lightblue; }
.card3 { background-color: mediumspringgreen; }
.card4 { background-color: khaki; }
.card5 { background-color: orchid; }
.card6 { background-color: darkgray; }


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

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }

  .card {
    background-color: blue;
  } 
}

<div class="container" >
  <div class="card card1" > card 1 </div>
  <div class="card card2" > card 2 </div>
  <div class="card card3" > card 3 </div>
  <div class="card card4" > card 4 </div>
  <div class="card card5" > card 5 </div>
  <div class="card card6" > card 6 </div>
  <div class="card card5" > card 7 </div>
  <div class="card card6" > card 8 </div>
</div>

Take a look at this pen similar to yours (using jQuery):

https://codepen.io/francisco2016/pen/bGEZyQJ

Creating a flexible layout using Flexbox

Answer №1

Answer №2

Similar questions

Alter the size of an element's width dynamically while maintaining a predetermined width

Using jQuery to alter the class of div elements in a specific sequence

Position offset for container in Bootstrap 4

"Font-face is effective in Internet Explorer but appears to have compatibility issues in Firefox particularly regarding font formats

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Define the hover color options within your personalized Bootstrap 4 design

Hovering over graphics for automatic scrolling

Combining Javascript and Django for a powerful web development solution

The issue with background image sizing persists on Internet Explorer version 8

Issues with HTML5 links not functioning as intended

The CSS and JS codes are not successfully integrating into the webpage

How can I make the row color of a jQuery datatable change when the row is selected?

Placing a Div wrapper around the contents of two corresponding elements

Creating a disappearing carousel on mobile and tablet that disappears when extended to md size

Concentrating on a Div Element in React

Chrome causes Bootstrap to add an additional pixel

I am having trouble placing the button within the image

An HTML table with a horizontal scroll that automatically follows the headings and a vertical scroll, but facing an issue with text

Having trouble adjusting the appearance of the dropdown menu in Angular Material's Select component

The CSS3 Animation must come to a halt once it reaches the 75% mark