Tips for implementing a CSS Flexbox layout with varying div heights

Question

Tips for implementing a CSS Flexbox layout with varying div heights

I am working on a page that features five unique panels, each with its own distinct height and width. I have been considering implementing CSS Flexbox to ensure these panels stack properly as the page becomes responsive.

However, one major issue I've encountered is that when using CSS Flexbox, all of the divs are being set to the same height, which does not align with my intentions for this layout.

Below is the Haml code used to generate the HTML structure:

.property-information
  .general-information-panel
     enough content for a height of 60px;
  .government-information-panel 
     enough content for a height of 100px;
  .owner-information-panel 
     enough content for a height of 80px;

Here is the corresponding CSS styling:

.property-information{
  font-size: 15px;
  opacity: .75;
  display: inline-flex;
  justify-content: space-between;
}

.general-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}
.government-information-panel{
  background-color: #e7f5fe;
  width: (500px;
}
.property-owner-information-panel{
  background-color: #e7f5fe;
  width: 400px;
}

My question remains: Is there a way to utilize CSS Flexbox while accommodating divs or panels with varying heights?

html css ruby flexbox haml

Answer 1

Answer №1

While I have begun a snippet, I am unsure of what you are expecting.
It would be helpful if you could provide a schema.

Once provided, I can assist further by modifying this snippet.

container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid red;
  width: 300px;
}

row {
  width: 200px;
  height: 50px;
}

#a {
  background-color: #fad390;
}

#b {
  background-color: #f8c291;
  width: 100px;
  height: 100px;
}

#c {
  background-color: #6a89cc;
}

#d {
  background-color: #82ccdd;
  width: 300px;
  height: 300px;
}

#e {
  background-color: #b8e994;
}

<container>
  <row id="a"></row>
  <row id="b"></row>
  <row id="c"></row>
  <row id="d"></row>
  <row id="e"></row>
</container>

Answer 2

While I have begun a snippet, I am unsure of what you are expecting.
It would be helpful if you could provide a schema.

Once provided, I can assist further by modifying this snippet.

container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  border: 1px solid red;
  width: 300px;
}

row {
  width: 200px;
  height: 50px;
}

#a {
  background-color: #fad390;
}

#b {
  background-color: #f8c291;
  width: 100px;
  height: 100px;
}

#c {
  background-color: #6a89cc;
}

#d {
  background-color: #82ccdd;
  width: 300px;
  height: 300px;
}

#e {
  background-color: #b8e994;
}

<container>
  <row id="a"></row>
  <row id="b"></row>
  <row id="c"></row>
  <row id="d"></row>
  <row id="e"></row>
</container>

Tips for implementing a CSS Flexbox layout with varying div heights

Answer №1

Similar questions

Border provides spacing within a div using the box-sizing property set to border-box

Is there a way to set a higher priority over the "!important" rule on my website?

Struggling to align your image properly?

How to achieve smooth transitions in CSS3 with dynamic height changes?

Customizing Material-UI styles with type overrides

What is the method for inserting JSON data into a select element's options?

What is the correct way to send parameters in the action tag?

Can someone guide me on how to create scrolling effects for my content? [html/css]

Utilizing HTML to call a function and fetching data from AngularJS

The JavaScript and CSS properties are not functioning properly with the HTML text field

How can I implement a location tracking system in my Rails website?

MySQL unable to access information entered into form

Refresh a particular element using javascript

Refreshing the information in the database table

Footer flexbox element not aligning underneath other content containers

Angular Bootstrap Modal not Displaying

Changing the background color with a switch function in ReactJS

Using JQuery functions from other JavaScript files is Simple

Adding query strings to the end of a URL in order to redirect to a new destination

Getting the input from an HTML editor and inserting it into a textarea using JavaScript