I am trying to achieve following responsive layout using flexbox as show in below image..
i tried few thing but is not getting the desired result.
Each item in this design has a image and top of that i need to show blog Title, date & category but i am not able to get the layout right
Currently i am doing same without flexbox but its lot of css and other tags, i though i could change same with less code using flex.
I have looked at lot of example but i am not able to find 1 example similar to my layout
current page is using bootstrap v3.3.6 which i cant change as it can impact other parts of the website
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex1 {
flex: 100%;
max-height:372px;
}
.flex2 {
flex:25%;
max-height:372px;
}
.flex3 {
flex:25%;
max-height:372px;
}
.flex4 {
flex:25%;
max-height:372px;
}
.flex5 {
flex:25%;
max-height:372px;
}
.flex-container > div > span {
position:absolute;
z-index:1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row row-margin">
<div class="flex-container">
<div class="flex1">
<img src="https://dummyimage.com/645x424/753075/fff.jpg&text=Image" class="img-responsive">
<span>1</span>
</div>
<div class="flex2">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>2</span>
</div>
<div class="flex3">
<img src="https://dummyimage.com/645x424/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>3</span>
</div>
<div class="flex4">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>4</span>
</div>
<div class="flex5">
<img src="https://dummyimage.com/480x360/3b063b/fff.jpg&text=Image" class="img-responsive">
<span>5</span>
</div>
</div>
</div>
</div>
2
Answers
I have managed to do it using grid and this is responsive without writing any extra media queries
basic working code example https://codepen.io/KGuide/pen/xxPWxKj
CSS
I would suggest you use grid, there are many ways to achieve this but most definitely flex is not the best way to deal with a grid like this if you care about media query. Nevertheless, one way is to use positions and flex. But its a trade off.
I have also realised that you can wrap the 2 items 2 and 4 into a single div and set its flex-direction to column, do the same for 3 and 6 items.