Designing a webpage with CSS flexbox layout featuring three boxes and a sidebar

Question

Designing a webpage with CSS flexbox layout featuring three boxes and a sidebar

Is it possible to achieve a layout like this using flexbox?

https://i.sstatic.net/dmvZN.png (I'm unable to insert the image directly...)

Here is the structure:

<main>
  <section class="Div1">
  </section>
  <section class="Div2">
  </section>
  <aside class="Div3">
  </aside>
</main>

Can I rearrange the elements inside <main> but without adding any additional wrappers for Div1 and Div2?

I want to change the order of elements for mobile devices (placing Div3 between Div1 and Div2), but keep the sidebar for higher resolutions...

Thank you!

html css layout sidebar flexbox

Answer 1

Answer №1

Do you think it's a good idea to utilize flexbox exclusively for organizing blocks on mobile devices, and for larger screens design the layout without it?

Check out my suggestion on jsfiddle.net.

main {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.Div1 {order: 1;}
.Div2 {order: 3;}
.Div3 {order: 2;}

@media (min-width: 768px) {
    main {
        display: block;
    }
    main:after {
        display: block;
        content: '\0020';
        clear: both;
    }
    .Div1, .Div2 {
        width: 60%;  
        float: left;
    }
    .Div3 {
        margin-left: 60%;
    }
}

Answer 2

Do you think it's a good idea to utilize flexbox exclusively for organizing blocks on mobile devices, and for larger screens design the layout without it?

Check out my suggestion on jsfiddle.net.

main {
    width: 300px;
    display: flex;
    flex-direction: column;
}

.Div1 {order: 1;}
.Div2 {order: 3;}
.Div3 {order: 2;}

@media (min-width: 768px) {
    main {
        display: block;
    }
    main:after {
        display: block;
        content: '\0020';
        clear: both;
    }
    .Div1, .Div2 {
        width: 60%;  
        float: left;
    }
    .Div3 {
        margin-left: 60%;
    }
}

Answer 3

Answer №2

Flexbox may not be the ultimate solution for all layouts, but it certainly adds more possibilities to your design capabilities.

If you're looking to create a layout that requires changing the number of columns, you might need to explore alternative solutions.

A simple static solution using Flexbox could look like this:

html, body, .container {
  width: 100%;
  height: 100%;
  overflow: hidden;  
}

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

.container div {
  flex: 1 0 auto;
  height: 50%;
  width: 50%;
}

#alfa { background: red; }
#beta { background: green; }
#gama { background: blue; }

<div class="container">
  <div id="alfa">a</div>
  <div id="beta">b</div>
  <div id="gama">c</div>
</div>

If you require a more dynamic solution, consider creating separate elements for each column with nested content:

<div class="container">
    <div id="column">
        <div id="alfa">a</div>
        <div id="beta">b</div>
    </div>

    <div id="column">
        <div id="gamma">c</div>
    </div>
</div>

Answer 4

Flexbox may not be the ultimate solution for all layouts, but it certainly adds more possibilities to your design capabilities.

If you're looking to create a layout that requires changing the number of columns, you might need to explore alternative solutions.

A simple static solution using Flexbox could look like this:

html, body, .container {
  width: 100%;
  height: 100%;
  overflow: hidden;  
}

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

.container div {
  flex: 1 0 auto;
  height: 50%;
  width: 50%;
}

#alfa { background: red; }
#beta { background: green; }
#gama { background: blue; }

<div class="container">
  <div id="alfa">a</div>
  <div id="beta">b</div>
  <div id="gama">c</div>
</div>

If you require a more dynamic solution, consider creating separate elements for each column with nested content:

<div class="container">
    <div id="column">
        <div id="alfa">a</div>
        <div id="beta">b</div>
    </div>

    <div id="column">
        <div id="gamma">c</div>
    </div>
</div>

Designing a webpage with CSS flexbox layout featuring three boxes and a sidebar

Answer №1

Answer №2

Similar questions

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

Prevent carousel from rotating while video is playing in Bootstrap 4

Basic adaptable menu for easy navigation

Tips on customizing the appearance of the "time" input type

React onClick event not firing

The MediaSource API is not supported on Chrome 27

Is there a way to dynamically reference an image within a webpage?

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

Using the window.setInterval() method to add jQuery/AJAX scripts to elements at regular intervals of 60 seconds

The HTML image file input restricts the user's selection to images stored in the gallery

Is there a way to stop text selection in Internet Explorer?

Javascript can determine the percentage values of the top and left positions

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

What are some ways I can ensure my webpage remains consistent and user-friendly when scrolling, rather than appearing distorted and jumbled?

Issue with image position shifting due to Bootstrap 4 Modal opening and closing

Creating custom styles using Material-UI's makeStyles function with both before and after

Enhancing the appearance of page navigation

Using inline CSS won't style the H3 element, but including an external CSS file will

Eliminate image of variant's dimensions from the slider on Shopify

Adding a div element with a background behind a text element using Jquery