HTML flex basic box structure

inside code you will understand how to do a flex box maintain

🔧 HTML Basics

Here’s a basic HTML structure you flex box

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="card1">
        <div class="subCard1">
          <h2>hello</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
            ipsum pariatur officia quis obcaecati exercitationem minus, enim ex,
            fugiat eius laborum dolores dolorum. Sint incidunt corporis nostrum,
            officia dicta doloribus.
          </p>
        </div>

        <div class="subCard2">
          <img
            src="https://images.pexels.com/photos/30772466/pexels-photo-30772466.jpeg"
            alt="logo"
          />
        </div>
      </div>

      <div class="card2">
        <div class="card3">
          <div class="content">
            <h2>Hero Heading</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
              saepe, corrupti fugiat, quis laboriosam in provident nostrum nam
              itaque aperiam molestiae exercitationem nihil veniam omnis esse
              soluta. Deleniti, aspernatur est?
            </p>
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
        <div class="card3">
          <div class="content">
            <img
              src="https://images.pexels.com/photos/30772466/pexels-photo-30772466.jpeg"
              alt="logo"
            />
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
        <div class="card3">
          <div class="content">
            <h2>Hero Heading</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
              saepe, corrupti fugiat, quis laboriosam in provident nostrum nam
              itaque aperiam molestiae exercitationem nihil veniam omnis esse
              soluta. Deleniti, aspernatur est?
            </p>
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
        <div class="card3">
          <div class="content">
            <h2>Hero Heading</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
              saepe, corrupti fugiat, quis laboriosam in provident nostrum nam
              itaque aperiam molestiae exercitationem nihil veniam omnis esse
              soluta. Deleniti, aspernatur est?
            </p>
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
        <div class="card3">
          <div class="content">
            <img
              src="https://images.pexels.com/photos/30772466/pexels-photo-30772466.jpeg"
              alt="logo"
            />
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
        <div class="card3">
          <div class="content">
            <h2>Hero Heading</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla
              saepe, corrupti fugiat, quis laboriosam in provident nostrum nam
              itaque aperiam molestiae exercitationem nihil veniam omnis esse
              soluta. Deleniti, aspernatur est?
            </p>
          </div>
          <div class="btn">
            <button>Click me</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  height: auto;
  font-family: Arial, Helvetica, sans-serif;
}
.container {
  /* background-color: red; */
  border-radius: 8px;
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.card1 {
  flex: 1;
  /* background-color: blue; */
  border-radius: 8px;
  display: flex;

  flex-wrap: wrap;
  gap: 20px;
}
.subCard1 {
  flex: 1;
  background-color: green;
  padding: 100px;
  border-radius: 8px;
}
.subCard2 {
  flex: 1;

  /* padding: 100px; */
  border-radius: 8px;
}
.subCard2 img {
  object-fit: cover;
  width: 100%;
  border-radius: 8px;
}
.card2 {
  flex: 1;
  background-color: grey;
  padding: 100px;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card2 .card3 {
  background-color: #e1e1e1;
  width: 300px;
  height: 300px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}
.card2 .card3 img {
  object-fit: cover;
}

.card2 .card3 h2 {
  font-size: 1.8rem;
}
.card2 .card3 .content {
  display: flex;
  gap: 20px;
  flex-direction: column;
  flex: 1;
}
.card2 .card3 .btn button {
  font-size: 1.2rem;
  padding: 5px 25px;
  border-radius: 10px;
  border: none;
}
@media (max-width: 768px) {
  .card1 {
    flex-direction: column;
  }
  .card2 {
    padding: 20px;
  }
  .subCard1 {
    padding: 20px;
  }
}