q Flex-wrap
September 03, 2025 0

Flex-wrap

By Admin 5 min read

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

 

<style>

*{

margin: 0;

box-sizing: border-box;

}

.container{

display: flex;

justify-content: space-between;

flex-wrap: wrap;

gap: 20px;

}

 

.image-box{

width: 400px;

background-color: aliceblue;

}

.image-box img{

width: 100%;

height: 200px;

object-fit: cover;

}

.main-body{

padding: 20px;

}

</style>

</head>

 

<body>

<div class="main-body">

<div class="container">

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

 

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

 

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

 

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

 

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

 

<div class="image-box">

<img src="image3.jpeg" alt="">

<h2>Flexing my car</h2>

<hr>

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, libero! Eveniet unde quam, possimus, odit commodi porro tenetur debitis iste qui ullam, sed soluta iusto aut ipsa aliquam consectetur ipsum.

</p>

</div>

</div>

</div>

</body>

</html>