in this example:
https://jsbin.com/sehuqowuca/edit?html,css,output
if I resized the view to be between 508px
and 334px
there is a horizontal space left and I can’t fill it because of item2
height taking the whole row
How to get rid of this horizontal space and make item-3
fill that gap like this: https://imgur.com/a/x2EUmg3,
can I do such a thing with flex-box
or I need to use a grid
layout and if so how would I achieve it using grid
?
.flex-container{
border:1px solid red;
border-radius:5px;
padding:1rem;
display:flex;
align-items:flex-start;
justify-content:flex-start;
gap:4rem;
flex-wrap:wrap;
}
.flex-item{
border:1px solid lightblue;
padding: .5rem;
border-radius:5px
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="flex-container">
<div class="flex-item item-1">
<h1>item1</h1>
<h1>item1</h1>
</div>
<div class="flex-item item-2">
<h1>item2</h1>
<h1>item2</h1>
<h1>item2</h1>
<h1>item2</h1>
<h1>item2</h1>
<h1>item2</h1>
</div>
<div class="flex-item item-3">
<h1>item3</h1>
<h1>item3</h1>
<h1>item3</h1>
<h1>item3</h1>
<h1>item3</h1>
<h1>item3</h1>
</div>
</div>
</body>
</html>
You need to sign in to view this answers
Leave feedback about this