Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

Question

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

My goal is to arrange the explanation and participation sections as flexboxes, positioned side by side. Below them, I want the benefits and requirements sections stacked on top of each other.

I have attempted to use flex-direction:row; for the explanation and participation parts, and then switch to flex-direction: column; for the remaining sections, but this approach has not been successful. I am in need of assistance to figure out how to achieve this. Additionally, it is important to note that I cannot modify the HTML structure.

.main {
  display: flex;
}

.benefits {
  flex-direction: column;
}

.requirements {
  flex-direction: column;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

html css flexbox

Answer 1

Answer №1

To create a flexible layout, you can implement a wrapping flexbox and adjust the layout using the flex-basis property. Take a look at the demo code provided below:

.main{
   display: flex; 
   flex-wrap: wrap; /* enables wrapping in the flex container */
}

.explanation, .participation{
   flex-basis: 50%; /* each element occupies half of a row (flex line) */
}

.benefits, .requirements{
    flex-basis: 100%; /* each element takes up a full row (flex line) */
}

.main > section { /* additional styling for visualization */
  border: 1px solid;
  box-sizing: border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
</main>

Answer 2

To create a flexible layout, you can implement a wrapping flexbox and adjust the layout using the flex-basis property. Take a look at the demo code provided below:

.main{
   display: flex; 
   flex-wrap: wrap; /* enables wrapping in the flex container */
}

.explanation, .participation{
   flex-basis: 50%; /* each element occupies half of a row (flex line) */
}

.benefits, .requirements{
    flex-basis: 100%; /* each element takes up a full row (flex line) */
}

.main > section { /* additional styling for visualization */
  border: 1px solid;
  box-sizing: border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
</main>

Answer 3

Answer №2

flex-direction is implemented from the parent flex container and can determine the layout of the children (either horizontal or vertical). While alignment of children can be modified individually, it does not affect the direction. (refer to the links below for more information on flex)

You can enable wrapping for elements and also specify a width or flex-basis for each of them.

With just a few lines of code like flex-wrap: wrap and flex-basis/* or width */ : 100%;, you can achieve this in your CSS.

.main {
  display: flex;
  flex-wrap: wrap;
}

.benefits,
.requirements {
  flex-basis: 100%;
}

section {
  /* to evenly distribute them in a row without specific sizes */
  flex: 1;
}


/* demo purposes starting from here */

section {
  margin: 2px;
  border: solid;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
  <!-- for demo purposes -->
  <section>demo purpose</section>
  <section>demo purpose</section>
  <section>demo purpose</section>

useful resources: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

flex-direction is implemented from the parent flex container and can determine the layout of the children (either horizontal or vertical). While alignment of children can be modified individually, it does not affect the direction. (refer to the links below for more information on flex)

You can enable wrapping for elements and also specify a width or flex-basis for each of them.

With just a few lines of code like flex-wrap: wrap and flex-basis/* or width */ : 100%;, you can achieve this in your CSS.

.main {
  display: flex;
  flex-wrap: wrap;
}

.benefits,
.requirements {
  flex-basis: 100%;
}

section {
  /* to evenly distribute them in a row without specific sizes */
  flex: 1;
}


/* demo purposes starting from here */

section {
  margin: 2px;
  border: solid;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>
  <!-- for demo purposes -->
  <section>demo purpose</section>
  <section>demo purpose</section>
  <section>demo purpose</section>

useful resources: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

Answer №3

To activate the wrap, adjust the width of your elements accordingly:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  width:50%; /*default half-width for all sections*/
  text-align:center;
  border:1px solid;
}

section.benefits,
section.requirements {
  width:100%; /*full width to stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

Adjust spacing with the following modifications:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  flex-basis:40%;
  flex-grow:1;
  text-align:center;
  border:1px solid;
  margin:10px;
}

section.benefits,
section.requirements {
  flex-basis:90%; /*full width to stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

Related: How to add 1px margin to a flex item that is flex: 0 0 25%?

Answer 6

To activate the wrap, adjust the width of your elements accordingly:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  width:50%; /*default half-width for all sections*/
  text-align:center;
  border:1px solid;
}

section.benefits,
section.requirements {
  width:100%; /*full width to stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

Adjust spacing with the following modifications:

.main {
  display: flex;
  flex-wrap: wrap;
}
.main > section {
  flex-basis:40%;
  flex-grow:1;
  text-align:center;
  border:1px solid;
  margin:10px;
}

section.benefits,
section.requirements {
  flex-basis:90%; /*full width to stack above each other*/
}

* {
  box-sizing:border-box;
}

<main class="main" id="zen-supporting" role="main">
  <section class="explanation" id="zen-explanation" role="article">
    <h3>What's This About?</h3>
    <p>There</p>
  </section>

  <section class="participation" id="zen-participation" role="article">
    <h3>Participation</h3>
    <p>Download</p>
  </section>

  <section class="benefits" id="zen-benefits" role="article">
    <h3>Benefits</h3>
    <p>Why participate?</p>
  </section>

  <section class="requirements" id="zen-requirements" role="article">
    <h3>Requirements</h3>
    <p>gtgtgtg</p>
  </section>

Related: How to add 1px margin to a flex item that is flex: 0 0 25%?

Utilizing Flexbox for Creating Horizontally Aligned Boxes with CSS

Answer №1

Answer №2

Answer №3

Similar questions

Optimize your website by caching static pages and content using Node.js

Transforming HTML code into a structured object

Error message in Angular js: Unable to load file using XMLHttpRequest

Discovering the XPath for a Tag containing both span and div attributes

Encountering a TypeError with DataTables and Tabledit

trigger a function when the iframe is altered

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

Attempting to acquire multiple responses for a single callback function from multiple requests

Resolving the Persistence Problem of Navigation Bar Fading In and Out

Troubleshooting image overlay alignment concerns

Trying to display logo using 'content' property in CSS

Adjusting the empty image source in Vue.js that was generated dynamically

Display <span> next to <select>

Is there a way to modify CSS class names on-the-fly within an Angular project?

What is the best way to adjust width in Bootstrap for responsiveness?

What could be causing this navigation item to vanish in Firefox?

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

What is the correct way to utilize href in CSS content property?

Exploration of Non-height Divs

Animating an image inside a bordered div