Arranging divs in various sequences using CSS flex positioning

Question

Arranging divs in various sequences using CSS flex positioning

I am attempting to achieve a specific css layout using Flexbox (as an alternative to a css grid layout), but I am unsure if it is feasible to create what I have envisioned.

The HTML structure I am working with is as follows:

<div class="container">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>

Here is the layout I am aiming for (easily achievable with css grid):

https://i.sstatic.net/JjiIP.jpg

Furthermore, I would like divs 1 and 3 to remain fixed when scrolling, while the content of div2 should be scrollable.

I am uncertain if this can be accomplished; I have experimented with various flex settings, but I have not been successful in achieving the desired outcome.

html css flexbox css-grid

Answer 1

Answer №1

If you have a container with a set height (let's assume it is 100% of the viewport), you can utilize column direction along with wrap and order properties to structure your layout:

html, body {
  margin:0;
  height:100%;
  color:white;
}
.container {
  height:100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.div1,
.div3 {
  height: 50%;
  width: 30%;
}

.div1 {
  background: red;
}

.div2 {
  max-height:100%; /* enable overflow scroll */
  overflow:auto;
  flex-grow: 1;  /* ensure div fills height */
  width: 70%;
  order: 3;      /* place this div at the end */
  background: grey;
}

.div3 {
  order: 2;       /* position this div below div1 */
  background: blue;
}

<div class="container">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2<br>DIV 2<br>...<br></div>
  <div class="div3">DIV 3</div>
</div>

Answer 2

If you have a container with a set height (let's assume it is 100% of the viewport), you can utilize column direction along with wrap and order properties to structure your layout:

html, body {
  margin:0;
  height:100%;
  color:white;
}
.container {
  height:100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.div1,
.div3 {
  height: 50%;
  width: 30%;
}

.div1 {
  background: red;
}

.div2 {
  max-height:100%; /* enable overflow scroll */
  overflow:auto;
  flex-grow: 1;  /* ensure div fills height */
  width: 70%;
  order: 3;      /* place this div at the end */
  background: grey;
}

.div3 {
  order: 2;       /* position this div below div1 */
  background: blue;
}

<div class="container">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2<br>DIV 2<br>...<br></div>
  <div class="div3">DIV 3</div>
</div>

Arranging divs in various sequences using CSS flex positioning

Answer №1

Similar questions

Creating a personalized LinkedIn share button through POST requests: here's how

Removing a CSS class using JQuery

What could be causing my php code to fail to trigger an alert when using Ajax technology?

One inner DIV positioned in the center flanked by two others on either side

Adding as HTML in Angular

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

Does the CSS overflow property affect the borders of an element?

What are the steps to designing a footer or toolbar in an iPhone web application?

Troubleshooting problem with displaying background images on iPad and iPhone devices

Is there a way to adjust the background hues of a React component when a click event is triggered?

Administering changes to JSON data files through PHP

The width of a <div> element in CSS is not dependent on the width

Set up a trigger to activate when a WordPress User Role is selected, or alternatively, execute JavaScript

Divide the result by using ajax

Deactivate the rest of the buttons by utilizing the e.target.id

Is there a problem with using Nth-Child / Nth-Of-Type in CSS when classes are dynamically added or removed using jQuery?

Can Angular's built-in internationalization features be used to translate bindings?

Guide to inserting an HTML file into an article's content

Show the chosen value from the dropdown menu on all JSP pages

How can I stack a div on top of two columns in Bootstrap?