Challenges encountered while constructing a flexbox layout

Question

Challenges encountered while constructing a flexbox layout

I have a flexbox design that I am trying to create with the specific layout shown in the image:

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

My HTML code is as follows (and I do not want to make any changes to it):

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

This layout is the standard format for the Joomla contact page. However, I want to change the design without modifying the HTML/PHP code.

Is it possible to achieve this using flexbox?

Additionally, can I utilize @media queries to ensure that right_1 - right_4 stack under left on mobile devices (e.g., screen width < 800px)?

I am having trouble implementing this myself as I always end up with right_1 - right_4 positioned next to each other instead of stacked beneath the left portion for the full height.

html css flexbox css-grid

Answer 1

Answer №1

The desired layout using flexbox is not achievable due to specific limitations. The reasons for this are detailed in the following link:

Can flex items align tightly with items above them?

However, achieving the layout becomes straightforward with CSS Grid.

There are several methods to implement the layout using Grid. I will employ the grid-template-areas property, enabling you to structure elements through ASCII art.

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
     " heading heading "
     "  left_ right1   "
     "  left_ right2   "
     "  left_ right3   "
     "  left_ right4   "
}

.page-header { grid-area: heading; }
.right_1     { grid-area: right1;  }
.right_2     { grid-area: right2;  }
.right_3     { grid-area: right3;  }
.right_4     { grid-area: right4;  }
.left        { grid-area: left_;   } /* "left" is a pre-defined CSS keyword,
                                         so it may not work */
@media ( max-width: 800px ) {
  .wrapper { 
     grid-template-columns: 1fr;
     grid-template-areas: 
        " heading "
        "  left_  "
        "  right1 "
        "  right2 "
        "  right3 "
        "  right4 "
     }
}

/* additional styles for aesthetics */
.page-header { background-color: red; }
.right_1    { background-color: chartreuse; }
.right_2    { background-color: aqua; }
.right_3    { background-color: skyblue; }
.right_4    { background-color: black; color: white; }
.left       { background-color: cornsilk; }
body        { margin: 0; }
.wrapper > * {
  font-weight: bold;
  font-size: 1.5em;
  border: 1px solid black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

View jsFiddle Demo

This approach utilizes the following steps:

Create a block-level grid using display: grid.
Specify two columns with grid-template-columns: 1fr 1fr, where each column equally shares available space (similar to flexbox's flex-grow).
Use grid-template-areas to define named grid areas and visually represent the layout using ASCII art.
In the media query for smaller screens, adjust the grid layout by removing one column and rearranging grid areas.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
Internet Explorer 11 - does not support current spec; only supports an obsolete version

For complete browser compatibility details, visit: http://caniuse.com/#search=grid

Answer 2

The desired layout using flexbox is not achievable due to specific limitations. The reasons for this are detailed in the following link:

Can flex items align tightly with items above them?

However, achieving the layout becomes straightforward with CSS Grid.

There are several methods to implement the layout using Grid. I will employ the grid-template-areas property, enabling you to structure elements through ASCII art.

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
     " heading heading "
     "  left_ right1   "
     "  left_ right2   "
     "  left_ right3   "
     "  left_ right4   "
}

.page-header { grid-area: heading; }
.right_1     { grid-area: right1;  }
.right_2     { grid-area: right2;  }
.right_3     { grid-area: right3;  }
.right_4     { grid-area: right4;  }
.left        { grid-area: left_;   } /* "left" is a pre-defined CSS keyword,
                                         so it may not work */
@media ( max-width: 800px ) {
  .wrapper { 
     grid-template-columns: 1fr;
     grid-template-areas: 
        " heading "
        "  left_  "
        "  right1 "
        "  right2 "
        "  right3 "
        "  right4 "
     }
}

/* additional styles for aesthetics */
.page-header { background-color: red; }
.right_1    { background-color: chartreuse; }
.right_2    { background-color: aqua; }
.right_3    { background-color: skyblue; }
.right_4    { background-color: black; color: white; }
.left       { background-color: cornsilk; }
body        { margin: 0; }
.wrapper > * {
  font-weight: bold;
  font-size: 1.5em;
  border: 1px solid black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

View jsFiddle Demo

This approach utilizes the following steps:

Create a block-level grid using display: grid.
Specify two columns with grid-template-columns: 1fr 1fr, where each column equally shares available space (similar to flexbox's flex-grow).
Use grid-template-areas to define named grid areas and visually represent the layout using ASCII art.
In the media query for smaller screens, adjust the grid layout by removing one column and rearranging grid areas.

Browser Support for CSS Grid

Chrome - full support as of March 8, 2017 (version 57)
Firefox - full support as of March 6, 2017 (version 52)
Safari - full support as of March 26, 2017 (version 10.1)
Edge - full support as of October 16, 2017 (version 16)
Internet Explorer 11 - does not support current spec; only supports an obsolete version

For complete browser compatibility details, visit: http://caniuse.com/#search=grid

Answer 3

Answer №2

Here's a solution using the current markup and CSS Flexbox.

The left element should be absolutely positioned for desktop view, while the page-header needs to have a fixed height.

If you prefer not to set a fixed height, you will need a script to handle the height calculation dynamically.

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrapper * {
  padding: 0 10px;
  margin: 0;
  border: 1px solid black;
  box-sizing: border-box;  
}
.page-header {
  height: 70px;
  width: 100%;
  background: red;
}
.right_1, .right_2, .right_3, .right_4 {
  flex: 1;
  width: 50%;
  margin-left: 50%;
  background: lightblue;
}
.left {
  position: absolute;
  left: 0;
  top: 70px;
  width: 50%;
  min-height: calc(100vh - 70px);
  background: yellow;
}
@media only screen and (orientation: portrait) {
  .wrapper * {
    width: 100%;
    margin: 0;
  }
  .left {
    position: static;
    flex: 1;
    min-height: auto;
    order: -1
  }
  .page-header {
    order: -2;
  }
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

Answer 4

Here's a solution using the current markup and CSS Flexbox.

The left element should be absolutely positioned for desktop view, while the page-header needs to have a fixed height.

If you prefer not to set a fixed height, you will need a script to handle the height calculation dynamically.

html, body {
  margin: 0;
}
.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.wrapper * {
  padding: 0 10px;
  margin: 0;
  border: 1px solid black;
  box-sizing: border-box;  
}
.page-header {
  height: 70px;
  width: 100%;
  background: red;
}
.right_1, .right_2, .right_3, .right_4 {
  flex: 1;
  width: 50%;
  margin-left: 50%;
  background: lightblue;
}
.left {
  position: absolute;
  left: 0;
  top: 70px;
  width: 50%;
  min-height: calc(100vh - 70px);
  background: yellow;
}
@media only screen and (orientation: portrait) {
  .wrapper * {
    width: 100%;
    margin: 0;
  }
  .left {
    position: static;
    flex: 1;
    min-height: auto;
    order: -1
  }
  .page-header {
    order: -2;
  }
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

Answer 5

Answer №3

If you're looking to rearrange div elements, one effective method is utilizing Jquery. Below is an example of how this can be achieved:

$("#element1").before($("#element2"));

Additionally:

CSS:

#blocks {
    display: box;
    box-orient: vertical;
}
#b1 {
    box-ordinal-group: 2;
}
#b2 {
    box-ordinal-group: 3;
}

HTML:

<div id="blocks">
    <div id="b1">Block 1</div>
    <div id="b2">Block 2</div>
    <div id="b3">Block 3</div>
</div>

Give it a try and see the results for yourself!

Answer 6

If you're looking to rearrange div elements, one effective method is utilizing Jquery. Below is an example of how this can be achieved:

$("#element1").before($("#element2"));

Additionally:

CSS:

#blocks {
    display: box;
    box-orient: vertical;
}
#b1 {
    box-ordinal-group: 2;
}
#b2 {
    box-ordinal-group: 3;
}

HTML:

<div id="blocks">
    <div id="b1">Block 1</div>
    <div id="b2">Block 2</div>
    <div id="b3">Block 3</div>
</div>

Give it a try and see the results for yourself!

Challenges encountered while constructing a flexbox layout

Answer №1

View jsFiddle Demo

Answer №2

Answer №3

Similar questions

Button with small width containing an icon and text

CSS <ul> <li> spacing issue in Internet Explorer 7

A pair of buttons each displaying a unique div block

Link the controls to an HTML table after clicking the button

Trouble with image click event in jQuery/JavaScript

How can I assign a background image to a specific state or template using AngularJS?

What is the best way to vertically center elements within a navigation bar?

How can a JQuery slideshow be programmed to only iterate once?

Locate the data attribute and store it in the database using an ajax request

Tips for increasing the font size using html and css?

Strange Firefox behavior with absolutely positioned div and percentage height

Troubleshooting: PHP Integration Issue with HTML Document

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

Altering the Size of Text in HTML

Hide overflow for images with unique shapes

Forming a header area by utilizing a 960 Grid container

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Having trouble inserting a Button element into a li parent element

ng-bind stops updating after entering text into input field

CSS unable to modify the color of the switch in HTML code