how do i arrange flex items with different dimensions in my container?-CodePudding

This is a sketch of what I'm trying to achieve

I want to achieve the above design with flexbox, but I don't know how; does anyone know a solution?

I've attached my HTML, and a sketch of it.

<ul >
  <div >
    <li>
      <img src="assets/image-2.jpg" alt="">
      <h3>Blog Post 1</h3>
      <p>Lorem ipsum!</p>
    </li>
  </div>
  <div >
    <li>
      <img src="assets/image-3.jpg" alt="">
      <h3>Blog Post 2</h3>
      <p>Lorem ipsum</p>
    </li>
  </div>
  <div >
    <li>
      <img src="assets/image-5.jpg" alt="">
      <h3>Blog Post 4 </h3>
      <p>Lorem ipsum</p>
    </li>
  </div>
  <div >
    <li>
      <img src="assets/image-4.jpg" alt="">
      <h3>Blog Post 3: About Me!</h3>
      <p>Lorem ipsum!</p>
  </div>
</ul>

Hopefully I can get this resolved. Your guidance is much appreciated.

CodePudding user response：

if you don't want to do it using grid, no problem. You can also use flex-box for that, However, this will be a little too much code to do so.

.container {
  display: flex;
  gap: 1rem; 
  height: 25rem;
  width: 25rem;
  padding: 1rem;
  background: pink;
}

.top-sub-container {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
}

.sub-container {
  flex: 1 1 auto;
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border: 1px solid black;
}

<div >
    <div >
        <div >
            <div >
                <img src="yourChoice.png" />
                <div >
                    This is the text of the box 1
                </div>
            </div>
            <div >
                <img src="yourChoice.png" />
                <div >
                    This is the text of the box 2
                </div>
            </div>
        </div>
        <div >
            <img src="yourChoice.png" />
            <div >
                This is the text of the box 3
            </div>
        </div>
    </div>
    <div >
        <img src="yourChoice.png" />
        <div >
            This is the text of the box 4
        </div>
    </div>
</div>

CodePudding user response：

This looks like a job for Grid, not Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Something like this (on the container) should be a solid start.

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