Flexbox presenting a specific alignment issue

Question

Flexbox presenting a specific alignment issue

I'm facing a challenge using Flexbox to achieve the desired result shown below

https://i.sstatic.net/8vJGQ.png

When trying to position my 2 blocks on the right, one of them ends up crossing the line and I struggle to bring it back up.

I want this layout to be managed dynamically in the future, which is why I am avoiding CSS Grid for now.

Could it be that I'm approaching this the wrong way?

 .o-wrapper{
        padding-right: 1.875rem;
        padding-left: 1.875rem;
        margin-right: auto;
        margin-left: auto;
        max-width: 75rem;
    }
    .page__project{
        margin-bottom: 30px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
    }

    .page__projects-list{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .page__project-bloc{
        padding: 50px;
        text-align: center;
        position: relative;
        z-index: 10;
    }

    .page__project--small{
          width: 31.0526315789%;
          height: 177px;
    }

    .page__project--large{
          width: 65%;
          height: 177px;
    }

    .page__project--big{
          width: 65%;
          height: 370px;
    }

<div class="o-wrapper page__projects-list">
        <div class="page__project page__project--small">
          <div class="page__project-bloc page__project-bloc--small">
            <h3 role="heading" aria-level="3">VLW #48</h3>
            <p>
              Mise en page du magazine Vivre la Wallonie 48e édition.
            </p>
          </div>
        </div>
        <div class="page__project page__project--large">
          <div class="page__project-bloc page__project-bloc--small">
            <h3 role="heading" aria-level="3">Elit Ligula Etiam</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque
              nisl consectetur et.
            </p>
          </div>
        </div>
        <div class="page__project page__project--big">
          <div class="page__project-bloc page__project-bloc--big">
            <h3 role="heading" aria-level="3">VLW #48</h3>
            <p>
              Mise en page du magazine Vivre la Wallonie 48e édition.
            </p>
          </div>
        </div>
        <div class="page__project page__project--small">
          <div class="page__project-bloc page__project-bloc--small">
            <h3 role="heading" aria-level="3">VLW #48</h3>
            <p>
              Mise en page du magazine Vivre la Wallonie 48e édition.
            </p>
          </div>
        </div>
        <div class="page__project page__project--small">
          <div class="page__project-bloc page__project-bloc--small">
            <h3 role="heading" aria-level="3">VLW #48</h3>
            <p>
              Mise en page du magazine Vivre la Wallonie 48e édition.
            </p>
          </div>
        </div>
      </div>

html css flexbox

Answer 1

Answer №1

This example showcases a common grid-based solution. By using display: grid and dividing the layout into a specific grid, you can easily achieve this effect. Learn more about grids on MDN by visiting this link.

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

You can define the columns and rows using the above code snippet. Then, assign a grid-area to each div element.

grid-column-gap: 5px;
grid-row-gap: 5px;

This will create space between the grid items. Take a look at the provided example for a visual representation:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 4;
}

.div3 {
  grid-area: 2 / 1 / 4 / 3;
}

.div4 {
  grid-area: 2 / 3 / 3 / 4;
}

.div5 {
  grid-area: 3 / 3 / 4 / 4;
}

.box {
  min-height: 100px;
  background-color: red;
}

<div class="parent">
  <div class="box div1">1</div>
  <div class="box div2">2</div>
  <div class="box div3">3</div>
  <div class="box div4">4</div>
  <div class="box div5">5</div>
</div>

Answer 2

This example showcases a common grid-based solution. By using display: grid and dividing the layout into a specific grid, you can easily achieve this effect. Learn more about grids on MDN by visiting this link.

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

You can define the columns and rows using the above code snippet. Then, assign a grid-area to each div element.

grid-column-gap: 5px;
grid-row-gap: 5px;

This will create space between the grid items. Take a look at the provided example for a visual representation:

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.div1 {
  grid-area: 1 / 1 / 2 / 2;
}

.div2 {
  grid-area: 1 / 2 / 2 / 4;
}

.div3 {
  grid-area: 2 / 1 / 4 / 3;
}

.div4 {
  grid-area: 2 / 3 / 3 / 4;
}

.div5 {
  grid-area: 3 / 3 / 4 / 4;
}

.box {
  min-height: 100px;
  background-color: red;
}

<div class="parent">
  <div class="box div1">1</div>
  <div class="box div2">2</div>
  <div class="box div3">3</div>
  <div class="box div4">4</div>
  <div class="box div5">5</div>
</div>

Answer 3

Answer №2

If you're considering using flex for this task, here's an option you can experiment with.

Alternatively, I recommend working with grid.

Check out the example on CodePen

I've set up a container with a row and utilized a sub-row to manage the layout of the two smaller boxes. Each image is treated as an item within the rows. Feel free to customize classes, images, etc. to suit your needs.

The goal is to treat those two boxes as individual items.

HTML

<div class="container">
  <div class="row">
    <div class="item short thin">
      <img src="https://source.unsplash.com/collection/190727/600x600">
    </div>
    <div class="item short wide">
      <img src="https://source.unsplash.com/collection/190727/1800x600">
    </div>
    <div class="item large">
      <img src="https://source.unsplash.com/collection/190727/600x600">
    </div>
    <div class="sub-row">
      <div class="item short">
        <img src="https://source.unsplash.com/collection/190727/600x600">
      </div>
      <div class="item short">
        <img src="https://source.unsplash.com/collection/190727/600x600">
      </div>
    </div>
  </div>
</div>

CSS

.container{
    width:767px;
    padding:50px;
}
.row{
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
}
.sub-row{
    display:flex;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content:space-between;
    width:33%;
    margin-top:10px;
}
.thin{
    width:33%;
    flex: 0 0 auto;
}
.wide{
    width:65%;
    flex: 0 0 auto;
}
.short{
    height:177px;
    flex: 0 0 auto;
}
.large{
    height:370px;
    width:65%;
    margin-top:10px;
}
.row .item img{
    width:100%;
    height:100%;
}

Answer 4

If you're considering using flex for this task, here's an option you can experiment with.

Alternatively, I recommend working with grid.

Check out the example on CodePen

I've set up a container with a row and utilized a sub-row to manage the layout of the two smaller boxes. Each image is treated as an item within the rows. Feel free to customize classes, images, etc. to suit your needs.

The goal is to treat those two boxes as individual items.

HTML

<div class="container">
  <div class="row">
    <div class="item short thin">
      <img src="https://source.unsplash.com/collection/190727/600x600">
    </div>
    <div class="item short wide">
      <img src="https://source.unsplash.com/collection/190727/1800x600">
    </div>
    <div class="item large">
      <img src="https://source.unsplash.com/collection/190727/600x600">
    </div>
    <div class="sub-row">
      <div class="item short">
        <img src="https://source.unsplash.com/collection/190727/600x600">
      </div>
      <div class="item short">
        <img src="https://source.unsplash.com/collection/190727/600x600">
      </div>
    </div>
  </div>
</div>

CSS

.container{
    width:767px;
    padding:50px;
}
.row{
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
}
.sub-row{
    display:flex;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content:space-between;
    width:33%;
    margin-top:10px;
}
.thin{
    width:33%;
    flex: 0 0 auto;
}
.wide{
    width:65%;
    flex: 0 0 auto;
}
.short{
    height:177px;
    flex: 0 0 auto;
}
.large{
    height:370px;
    width:65%;
    margin-top:10px;
}
.row .item img{
    width:100%;
    height:100%;
}

Flexbox presenting a specific alignment issue

Answer №1

Answer №2

HTML

CSS

Similar questions

When jQuery updates the content, the div content disappears temporarily

Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

Excessive letter spacing in font-face causing display issues on Apple devices such as iPhone and iPad

Incorrect font display occurring exclusively on Windows Chrome

What kinds of font file formats are you utilizing?

To retrieve the value of a specific row within a table and remove that row

Refresh the data in the DataTables table using a fragment

Is it better to have a heading titled "Navigation" above a <nav> element, or should it be included inside the navigation element itself?

Customizable page layout with fixed width that adjusts based on content

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Extract a section of the table

A step-by-step guide to displaying a label component upon clicking an AjaxLink

Combining various functions into a single button

Problem Alert: Click Event Not Functioning on Generated Links

Printing Strings in JavaScript IF Conditional Block

Use .load() to set an image as background in the div

Navbar links in Bootstrap unexpectedly expanding in width

Enhancing text visibility in dompdf by making it bold or increasing its size

Effortless 'rotational' script