Recreating this Blog post with Flexbox-CodePudding

I’m trying to recreate the following image as an HTML using only Flexbox, no float. Problem is that I have no idea where to even begin. I can pretty easily get the header, the nav bar and the footer, but it’s the body that I’m having problems grasping.

I get that there’s three sections, two on the left and one on the right. My problem is that I don’t know to implement it. The two sections on the left, how do I go about posting the text to the right of the image. And how do I go about positioning the right container to the right? Any help would be greatly appreciated.

image

CodePudding user response：

Look at the layout i made here

` One Two Three

</div>`

css

enter code here
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(400px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1 / 3;
background: #0e0;
}
.two {
grid-column: 1 / 3;
grid-row: 2 / 3;
background: #000;
}
.three {
grid-column: 3 / 3;
grid-row: 1 / 3;
background: #f10;
}

CodePudding user response：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            width: 100%;
            height: 100%;
        }
        
        .wrapper .leftwrapper {
            width: 75%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .wrapper .rightwrapper {
            width: 25%;
            height: 100%;
            background: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 10px;
            margin: 5px;
        }
        
        .listone {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            margin: 5px;
            padding: 10px;
        }
        
        .listone div img {
            height: 200px;
            width: 200px;
            object-fit: cover;
            border-radius: 15px;
        }
        
        .listtwo {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            margin: 5px;
            padding: 10px;
        }
        
        .details {
            margin: 5px;
            padding: 10px;
            ;
        }
        
        .listtwo div img {
            height: 200px;
            width: 200px;
            object-fit: cover;
            border-radius: 15px;
        }
        
        .rightwrapper .xed {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .xed img {
            height: 200px;
            width: 200px;
            object-fit: cover;
            border-radius: 15px;
        }
    </style>
</head>

<body>

    <div >
        <div >
            <div >
                <div><img src="https://images.pexels.com/photos/12312075/pexels- 
 photo-12312075.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></div>
                <div >
                    <h2>postendkflsd </h2>
                    <h3>fasdfujojabsdgabsg </h3>
                    <h4>Lorem, ipsum dolor sit amet consectetur adipisicing 
 elit. Libero soluta ex cum necessitatibus? Assumenda ullam ratione harum 
   placeat iure tempore, suscipit sit! Omnis commodi, amet perferendis inventore 
  officiis dicta error.</h4>
                    <button>Read more</button></div>

            </div>
            <hr>
            <div >
                <div><img src="https://images.pexels.com/photos/12312075/pexels- 
photo-12312075.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt=""></div>
                <div >
                    <h2>postendkflsd </h2>
                    <h3>fasdfujojabsdgabsg </h3>
                    <h4>Lorem, ipsum dolor sit amet consectetur adipisicing 
 elit. Libero soluta ex cum necessitatibus? Assumenda ullam ratione harum 
 placeat 
 iure tempore, suscipit sit! Omnis commodi, amet perferendis inventore officiis 
 dicta 
 error.</h4>
                    <button>Read more</button></div>

            </div>
        </div>
        <div >
            <div >
                <h2>postendkflsd </h2>
                <img src="https://images.pexels.com/photos/12312075/pexels- 
photo-12312075.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="">
                <h4>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
Libero soluta ex cum necessitatibus? Assumenda ullam ratione harum placeat iure 
tempore, suscipit sit! Omnis commodi, amet perferendis inventore officiis dicta 
error.</h4>
                <button>Read more</button>
            </div>
        </div>
    </div>
</body>

</html>