Unlocking the full potential of Flexbox for your material design dashboard layout

I am looking to create reusable templates that feature a clean and minimalist flex-based CSS design. The template I am working on is for a dashboard containing five "cards" of varying sizes. Cells 2, 3, and 5 should be of equal width, approximately a quarter of the total width. Cells 1 and 4 should take up the remaining space. Edit: In terms of height, all cells except for cell 1 should have the same height, shorter than cell 1. This setup creates the effect of one large card, three small cards, and one wide but short card.

https://jsfiddle.net/2jjuxdhw/8/

I have tried using align-content: stretch to make the cells fill the vertical space, but it is not working as expected. I am also wondering if styling all sections as rows and columns is necessary or if there is a more efficient way to achieve the layout. Thank you for any assistance.

HTML

<div id="container">


         <div class="column fullheight" id="column2">

        <section class="row row1">

          <div class="cell" id="cell1"><div>cell1</div></div>

          <section class="column">
            <div class="cell" id="cell2"><div>cell2</div></div>

            <div class="cell" id="cell3"><div>cell3</div></div>
          </section>

        </section>
        <section class="row row2">

          <div class="cell" id="cell4"><div>cell4</div></div>

          <div class="cell" id="cell5"><div>cell5</div></div>

        </section>


      </div>
</div>

CSS

   div#container {
      position: relative;
      height: 400px;
      display: -webkit-flex;
      display: flex;
      flex-flow: row wrap;
      border: 1px solid blue;
      align-items: stretch;
    }


 div#column2 {
      flex-grow:3;
      display: flex;
      flex-direction: column;
      height: 100%;
      /*flex-wrap: wrap;*/
      align-content: stretch;
      justify-content: flex-start;
      align-items: stretch;
    }

    div#column2 section.row {
      display: flex;
      flex-direction: row;
      /*align-content: stretch;*/
    }

    div#column2 section.column {
      display: flex;
      flex-direction: column;

    }

    section.column, div.cell { flex: 1 0 auto; }


    div.cell {
      background-color: whitesmoke;
      padding: 0.5em;

    }

    div#cell1,div#cell4 { padding-left: 1em; flex: 3 0 auto; }
    div#cell1,div#cell2 { padding-top: 1em; }
    div#cell2,div#cell3, div#cell5 { padding-right: 1em; }

    div.cell > div {
        flex: 1 1 auto;
        background-color: white;
        height: 100%;
        width: 100%;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    }

https://jsfiddle.net/2jjuxdhw/8/

Answer №1

Revise

In response to your updated inquiry, consider adopting a strategy similar to the one outlined below:

sandbox

.container {
  height: 400px;
  display: flex;
  flex-direction: column;
  border: 1px solid blue;
}

.row {
  display: flex;
}

.row--top {
  flex: 2;
}

.row--bottom {
  flex: 1;
}

.cell-wrap {
  width: 25%;
  display: flex;
  flex-direction: column;
}

.cell {
  flex: 1;
  background-color: white;
  margin: .5em;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}
<div class="container">
  <div class="row row--top">
    <div class="cell">cell one</div>
    <div class="cell-wrap">
      <div class="cell">cell two</div>
      <div class="cell">cell three</div>
    </div>
  </div>
  <div class="row row--bottom">
    <div class="cell">cell four</div>
    <div class="cell-wrap">
      <div class="cell">cell five</div>
    </div>
  </div>
</div>

Initial response

sandbox

.container {
  height: 400px;
  display: flex;
  border: 1px solid blue;
}

.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right {
  min-width: 25%;
  display: flex;
  flex-direction: column;
}

.cell {
  flex: 1;
  background-color: white;
  margin: .5em;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}
<div class="container">
  <div class="left">
    <div class="cell">cell one</div>
    <div class="cell">cell four</div>
  </div>
  <div class="right">
    <div class="cell">cell two</div>
    <div class="cell">cell three</div>
    <div class="cell">cell five</div>
  </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

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

Plugin for jQuery that paginates text when it overflows

Looking for a solution here. I have a fixed width and height div that needs to contain text. If the text exceeds the size of the div, I want it to paginate with dots at the bottom of the page indicating each page, similar to slideshow functionality. Are t ...

As the cursor moves, the image follows along and rotates in sync with its

Can anyone help me figure out how to create a moving image that follows the mouse cursor? I have a radial pie menu with an image in the middle, and I want it to spin and rotate as the mouse moves. Any ideas on how I can achieve this effect? I would greatl ...

What is the best way to design a Bootstrap grid layout that includes a responsive left column with a minimum width and a scrollable right column?

I'm so close to getting the desired look and behavior, but I'm facing a problem with the scrolling in the right column. The scrollbar is visible but it's not scrolling the content on the right side. It should look like this: . Currently, i ...

Tips for creating a dynamic menu with animated effects

Check out my fiddle here: http://jsfiddle.net/k3AHM/23/ $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 110) { $('.menu-container').addClass( "fix-menu" ).animate('top', '-3px&a ...

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Live Demo: Live Demo HTML: <div class="target"> <img src="bg-clock.png" alt="jQuery" /> </div> <div class="target2"> <img src="bg-clock.png" alt="jQuery" /> </div> CSS: .target, .target2 { ...

What is the best way to populate a dropdown menu in PHP?

I am trying to populate my combobox with names from an SQL database. I came across some code on W3schools, but I am having trouble integrating it into my own code. Currently, the combobox is filled with select, but that's not the intended functionalit ...

Troubleshooting the Height Problem in Bootstrap Divisions

Can someone help me align the height of the alert box with the input field? I've tried using Bootstrap classes but can't seem to get it right. I attempted using col-mb-4 in the alert class, but the height alignment is still off. <link rel= ...

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

Attempting to create a dynamic layout for the objects using media queries and flexbox, however, the results are not as expected

.container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; } .item { margin: 10px; border: 1px solid lightgray; border-radius: 10px; overflow: hidden; width: 100%; } @media scree ...

Even when autocomplete is disabled, Firefox continue to cache hidden input fields

I'm encountering an issue with a form that has the autocomplete attribute set to off. Within this form, there is a hidden input element (created using ASP.NET MVC's Html.HiddenFor() method): <input type="hidden" value="0" name="Status" id="S ...

Header and footer remain unaligned

Bookstore.html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> ul { list-style-type: none; padding: 20px; overflow: hidden; background-color: black; width:1230px; p ...

Creating Flexible Designs - Implementing a responsive sidebar with dynamic scrolling

I am in the process of developing a simple web application that features a sidebar whose vertical size is dependent on the number of elements it contains. My goal is to make the web app responsive, ensuring it works well on devices of any size. In cases ...

Choosing one item from an array to showcase in a view [Angular]

I've previously inquired about this issue without success. My current challenge involves a store app created with AngularJS. I am trying to implement a feature where clicking on an item will open it in a separate "item" view, displaying only the info ...

Show concealed content for individuals who do not have javascript enabled

One of the challenges I faced was creating a form with a hidden div section that only appears when a specific element is selected from a list. To achieve this, I utilized CSS to set the display property of the div to 'none' and then used jQuery t ...

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

Utilizing icons for form-control-feedback in Bootstrap 4

I am struggling to achieve the desired display using Bootstrap 4 form-control feedback styling. The goal is to include an icon inside the input field along with an error message. My current setup includes Angular 5.2.9, Bootstrap 4, and Fontawesome icons. ...

The border-radius style will not be effective on the top part of the div

I'm currently developing a landing page for my personal use, but I've encountered an issue. There is a div with a border-radius named .popOut. The border-radius is applied to the bottom of the div but not the header part. Why is this happening? H ...

Is there a way in Ruby to extract the inner HTML of the <title> tag by loading the HTML source code of a webpage into a string and then parsing it?

Currently, I am trying to extract the inner HTML of the <body> tag from an HTML source string using Ruby. Does anyone know how this can be achieved? Despite my attempts to find a solution, I have been unsuccessful so far. Any guidance would be grea ...