Is it possible to use other methods to wrap these image items with the display: flex; property besides using the flex-wrap property? Are there alternative approaches available?
body {
margin: 0px;
}
img {}
h1 {}
p {}
a {
background-color: #ddd;
border: 1px solid #000;
padding: 10px 20px;
margin: 10px;
}
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background-color: #eee;
padding: 10px;
margin: 10px;
}<div class="container">
<div class="item">
<img src="http://lorempixel.com/1024/512/" alt="">
<h1>Title 1</h1>
<a href="#">Link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel suscipit ligula. Vestibulum eu metus nibh. In nec dignissim orci.</p>
</div>
...
...
<div class="item">
<img src="http://lorempixel.com/512/512/" alt="">
<h1>Title 7</h1>
<a href="#">Link</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel suscipit ligula. Vestibulum eu metus nibh. In nec dignissim orci.</p>
</div>
</div>