I'm attempting to utilize flexbox for arranging elements in the layout shown below:
-- ------ --
| | | |
|--| |--|
| | | |
-- ------ --
Each corner 'box' contains an image with a square aspect ratio of 1:1. The center 'box' has a ratio of 3:2.
The issue arises when the height of the corner boxes and the center box exceeds the actual height of the responsive images within them. I want to align everything perfectly.
Is there a way to ensure that the flex items line up correctly?
Here's the codepen link for reference: https://codepen.io/codybarr/pen/zNgpVK
EDIT: Adding display: flex to .container .item fixed the alignment issue in Firefox, but not in Chrome or Safari. It seems like the images are stretching weirdly...
img {
max-width: 100%;
}
@media (min-width: 700px) {
.main {
display: flex;
flex-direction: row;
background-color: orange;
}
.container {
display: flex;
flex-direction: column;
}
.container.second-column {
flex: 1 0 60%;
}
.container .item {
display: flex;
}
.container.second-column .item {}
.container.first-column .item:nth-child(1) {
background-color: blue;
}
.container.first-column .item:nth-child(2) {
background-color: yellow;
}
.container.third-column .item:nth-child(1) {
background-color: red;
}
.container.third-column .item:nth-child(2) {
background-color: green;
}
}<head>
<title>Flex Testing</title>
</head>
<body>
<h1>Flex Test!</h1>
<div class="main">
<div class="container first-column">
<div class="item">
<img src="http://i-cdn.phonearena.com/images/article/90741-image/Google-touts-advanced-recipe-search-in-mobile-app.jpg" />
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/-cigJW9TQSRU/AAAAAAAAAAI/AAAAAAAAABg/Pg3e9ogcsHU/s640/photo.jpg" />
</div>
</div>
<div class="container second-column">
<div class="item">
<img src="https://www.inetsolutions.org/wp-content/uploads/2016/01/Capital-Letters-in-URLs-Do-Not-Influence-Google-Rankings.png" />
</div>
</div>
<div class="container third-column">
<div class="item">
<img src="http://www.sociallyawareblog.com/files/2016/12/GettyImages-610773752_small.jpg" />
</div>
<div class="item">
<img src="https://s-media-cache-ak0.pinimg.com/564x/b1/e2/db/b1e2dbe6c6b547a2ebc53a49fc3ffa8c.jpg" />
</div>
</div>
</div>
</body>