Creating a dynamic design with two columns using flexbox

Question

Creating a dynamic design with two columns using flexbox

I'm working with a small layout that consists of sections

.custom-collection {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.custom-collection section {
  width: 50%;
}

<div class="custom-collection">
  <section>
    <h2>bar</h2>
  </section>

  <section>
    <h3>baz</h3>
  </section>

  <section>
    <h1>FOO</h1>
  </section>
</div>

In this design, everything is arranged in one column. The desired outcome should look like:

___________
| h2 |    |
|____| h1 |
|_h3_|____|

I understand that the layout would wrap if I set max-width, but determining the size of the div in advance is challenging. My goal is to achieve wrapping in a way that ensures both columns have equal height.

How can I accomplish this?

html css flexbox

Answer 1

Answer №1

Setting the h1 section to have a height of 100% will cause it to move to a new column.

* {
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.collection {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.collection section {
    width: 50%;
    flex: 1;
    border: 1px dashed black;
}

.collection section:last-child {
    flex-basis: 100%;
}

@media ( max-width: 700px ) {
    .collection section { width: 100%; } 
    .collection section:last-child { flex-basis: auto; } 
}

<div class="collection">
    <section><h2>bar</h2></section>
    <section><h3>baz</h3></section>
    <section><h1>FOO</h1></section>
</div>

Check out this jsFiddle link for more details

Answer 2

Setting the h1 section to have a height of 100% will cause it to move to a new column.

* {
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.collection {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.collection section {
    width: 50%;
    flex: 1;
    border: 1px dashed black;
}

.collection section:last-child {
    flex-basis: 100%;
}

@media ( max-width: 700px ) {
    .collection section { width: 100%; } 
    .collection section:last-child { flex-basis: auto; } 
}

<div class="collection">
    <section><h2>bar</h2></section>
    <section><h3>baz</h3></section>
    <section><h1>FOO</h1></section>
</div>

Creating a dynamic design with two columns using flexbox

Answer №1

Check out this jsFiddle link for more details

Similar questions

Disabling the scrollTop() effect following a click event with onClick()

Issue with the alignment of form input fields and buttons in Mozilla Firefox

Issue caused by overflowing content and resizing the display

Enhancing the Alignment of a Bootstrap Navbar with CSS

Creating a nested JSON structure by fetching data from a remote source

Choosing a preset value from the dropdown menu does not successfully capture the value, resulting in the data not being transmitted to the database

The expected values from the Express POST request were not successfully retrieved

Unable to click on links due to issues with the CSS and HTML

Achieving a sleek line effect with a gradient border

How to locate an element in Webdriver/Selenium when it lacks a class name, id, or css selector?

Eliminate parameters from the image source URL

Creating responsive modal windows in Vue and Laravel to dynamically adjust to the screen size

Tips for maintaining accessibility to data while concealing input information

Stop the creation of new div elements once the minimum height has been reached or when text is past

The placement of my image shifts when I switch to the mobile view

Aligning buttons vertically using Bootstrap 4 and styling them as anchors

The Iframe on the webpage is automatically refreshing once a submission is made, which is not a feature present in the original version of

Enhance Bootstrap: adjust button width based on fluid text width

creating div elements dynamically using JavaScript

Navigation bar not adjusting to the size of the mobile device's screen