I'm trying to make 2 images span the whole height of an image beside it. Is there a flexbox way of doing so? I'm trying to use flexbox-direction: column but the problem I'm getting is that the 2 images span twice the image while I want them to fill the space of the single image.
https://jsfiddle.net/nLsa4oqc/
.wrapper {
display: flex;
}
.first {
flex: 1;
}
.second {
flex: 1;
display: flex;
flex-direction: column;
}
.second-a {
flex: 1;
}
.second-b {
flex: 1;
}
<div class="wrapper">
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<div class="second-a">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second-b">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
</div>
</div>
You can use flex property, like this:
fiddle
.wrapper {
display: flex;
}
.first {
flex: 2;
}
.second {
flex: 1;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
<div class="wrapper">
<div class="first">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second">
<div class="second-a">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
<div class="second-b">
<img src="https://sarahannephoto.files.wordpress.com/2015/01/devyn_015.jpg?w=1008" alt="">
</div>
</div>
</div>
Related
I'm trying to implement horizontal scrolling of fixed width images which are wrapped in divs. The entire layout is wrapped in flex with a left right layout.
However, I'm not able to keep the parent width of the boxes from overflowing. I need the children boxes to scroll horizontally and its parent contained in a flex.
Link to fiddle: https://jsfiddle.net/wn8zd2t6/43/
.dash {
display:flex;
width:100%;
}
.left {
width: 380px;
height: 100vh;
}
.right {
flex: 1 1 0%;
display:flex;
flex-direction: column;
}
.b {
border:1px solid black;
}
.ig {
display:inline-block;
height:100px;
width:180px;
object-fit: cover;
}
.scrollable {
white-space: nowrap;
overflow-x:scroll;
}
.box {
display: inline-block;
}
<div class="dash">
<div class="left b">
left
</div>
<div class="right b">
<div>
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
</div>
</div>
</div>
</div>
The flex-basis: 0% isn't enough to define a fixed width on the images container, therefore the overflow function doesn't have a break point.
Instead of flex: 1 1 0% use width: calc(100% - 380px) (the 380px being the fixed width of the other column).
This is all you need:
.right {
/* flex: 1 1 0%; */
width: calc(100% - 380px); /* new */
}
revised jsfiddle
.dash {
display: flex;
width: 100%;
}
.left {
width: 380px;
height: 100vh;
}
.right {
/* flex: 1 1 0%; */
width: calc(100% - 380px); /* new */
display: flex;
flex-direction: column;
}
.b {
border: 1px solid black;
}
.ig {
display: inline-block;
height: 100px;
width: 180px;
object-fit: cover;
}
.scrollable {
white-space: nowrap;
overflow-x: scroll;
}
.box {
display: inline-block;
}
<div class="dash">
<div class="left b">
left
</div>
<div class="right b">
<div>
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
<div class="box">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" class="ig" />
<div>
img caption
</div>
</div>
</div>
</div>
</div>
</div>
I simplified your flex code into the following. I added border styling to the image divs for visual clarity of what's going on.
It's important to remember that to constrain a child element's width to a parent with flex view, the parent flex container must have a constraint on it's width, even if it's width: 100%;
You can see this within the .right class and that controls how the rest of that column's children behave with their flex-grow.
/* Utility */
.border-settings {
border: 1px solid black;
}
.scrollable {
display: flex;
flex-direction: row;
overflow-x: scroll;
padding: 10px;
}
/* Container Settings */
.dashboard {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
}
.left {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.right {
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
max-width: 50%;
}
.container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card {
margin: 10px;
padding: 10px;
border-style: solid;
border-color: black;
border-width: 1px;
border-radius: 10px;
}
/* Element Settings */
img {
height: 100px;
width: 180px;
}
<div class="dashboard">
<div class="left border-settings">
left Section
</div>
<div class="right border-settings">
<div class="top">
top section
</div>
<div class="container">
<!-- necessary -->
<div>
scrollable section title
</div>
<!-- need this to be scroll -->
<div class="scrollable">
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
<div class="card">
<img src="https://via.placeholder.com/150/FF0000/FFFFFF" />
<p>img caption</p>
</div>
</div>
</div>
</div>
</div>
I stumbled upon an issue with image centering within a flexbox with direction:column.
Imagine you have two elements within a flexbox, where the first one contains an image:
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
.image-container {
flex: 1;
align-self: center;
.img {
height: 100%;
}
}
.another-flex-child {
flex: none;
background-color: red;
}
}
I would expect the image to be center horizontally within the div, but it appears the left border of the image is exactly at the center of the div.
When I replace the image with another div which contains some text it is placed as expected.
Can anybody explain to me whats happening there?
Checkout this fiddle
Because your <div> that contains the image (and has align-self: center on it) is by default a block-level element, and has a width of 100% by default. As such, it is constrained in relation to the parent.
In order to have your image centered correctly, you'll want to add display: contents with:
container .image-container {
display: inline;
}
This can be seen in the following:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.container .image-container {
flex: 1;
align-self: center;
display: contents;
}
.container .image-container .img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
The issue is that you are using an SVG with no intrinsic dimension and only an intrinsic ratio so it's like your image has a width equal to 0 which make its centred container with a width equal to 0, too.
Here is before using height:100%
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
}
.img {
/*height: 100%;*/
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
After setting height:100% the image will fill all the space and will keep its ratio but you will have an overflow because the browser will not go back to calculate the width of the container again:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
To avoid this give the image a width and make sure to add min-height:0 to the container to allow it to shrink
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" width="250">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
If you were initially using an image with intrinsic dimension you won't have this issue and you don't need to define a width. You will only need to add min-height:0 to avoid the overflow:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/400/400">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Note that the above doesn't work the same way in Firefox and you will need to add text-aling:center to make sure it works the same everywhere:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
text-align:center;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/400/400">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
You will notice that the difference is related to the width calculation of the container which a bit complex due to the use of height:100%
Things may get worse if the size of the image is very small:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
text-align:center;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/50/50">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
In Firefox text-align:center will do nothing and you may need a nested flexbox container
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
justify-content:center;
border:2px solid blue;
display:flex;
min-height:0;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://picsum.photos/id/1/50/50">
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
The below is almost the same issue you were having with the initial SVG that can fixed with this same code but it won't remove the overflow:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
display:flex;
justify-content:center;
border:2px solid blue;
}
.img {
height: 100%;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Another intresting thing to note is that your initial code may work fine if you add height:100% to the container making the calculation of the nested height easier:
.container {
height: 300px;
background-color: green;
display: flex;
flex-direction: column;
}
.image-container {
flex: 1;
align-self: center;
border:2px solid blue;
box-sizing:border-box;
height:100%;
}
.img {
height: 100%;
display:block;
}
.another-flex-child {
flex: none;
background-color: red;
}
.spacer {
height: 20px;
}
<div class="container">
<div class="image-container">
<img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" >
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
<div class="spacer"></div>
<div class="container">
<div class="image-container">
<div>Properly centered content</div>
</div>
<div class="another-flex-child">
Random content here
</div>
</div>
Add the justify-content like below:
.image-container {
flex: 1;
align-self: center;
justify-content:center;
}
it should works
https://jsfiddle.net/joel081112/6yud4bvo/3/
I have this fiddle which shows my current situation. I cant get my text to always be aligned in the middle of the div next to the image. At the minute the text stays level with the top of the div.
I have tried vertical-aligned and top: 50% but I must be missing something easy
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
.homeIm1 {
height: auto;
float: right;
}
.item {
display: flex;
width: 100%;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item > div {
width: 50%;
}
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
That code is the crux of what I'm using
Since your .item element is a flexbox set align-items: center on the item:
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
}
.homeInfo2 {
padding: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>
Try using flex.
You have to create a div next to the image and then justify-content-center and align-items-center. For more information use google :) Especially css-tricks would be helpful! CSS-Tricks
Just add align-items: center; in your item class.
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
float: right;
}
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>
This question already has an answer here:
Change div order with CSS depending on device-width
(1 answer)
Closed 3 years ago.
I have a div that shows an image and text and i load the content with a foreach and i need to invert the order div in second row of foreach.
First div shows:
Image - Text
Second div shows:
Text - Image
For example:
.content
{
width:100%;
height: 200px;
}
.content .image, .content .text
{
width:50%;
float:left;
}
.content .image img
{
width:100%;
}
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text1</span>
</div>
</div>
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text2</span>
</div>
</div>
Thank you
You can do this with at least 2 options
1. using flexbox see below
.content {
width: 100%;
height: 200px;
display: flex;
}
.content .image,
.content .text {
width: 50%;
float: left;
}
.content .image img {
width: 100%;
}
.content:nth-child(even) {
flex-direction: row-reverse
}
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text1</span>
</div>
</div>
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text2</span>
</div>
</div>
2. using float:right see below
.content {
width: 100%;
height: 200px;
}
.content .image,
.content .text {
width: 50%;
float: left;
}
.content .image img {
width: 100%;
}
.content:nth-child(even) .image{
float:right;
}
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text1</span>
</div>
</div>
<div class="content">
<div class="image">
<img src="https://www.w3schools.com/css/trolltunga.jpg" />
</div>
<div class="text">
<span>text2</span>
</div>
</div>
Using Flexbox, I'm trying to achieve this:
But I'm instead reaching this point:
Here is what I've got so far (vendor prefixes omitted). If someone could help get this working well in either Firefox or Chrome, I'd very much appreciate it.
img {
max-width: 100%;
}
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.item,
.img-wrapper {
align-items: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>
</div>
The align-items property applies only to flex containers.
You have it applied to img-wrapper:
.item,
.img-wrapper {
align-items: center;
}
...but this element is not a flex container.
Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.
Try this:
.item,
.img-wrapper {
align-items: center;
display: flex;
}
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
flex-grow: 1;
flex-shrink: 0;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
And the only reason the text in the left column is vertically aligned in that location is because that happens to be where it meets the bottom margin of the photo.
If you want the text in the right column to be aligned in the same spot, make the top element an image or box equal in height to its cousin in the adjacent column.
.container {
display: flex;
justify-content: center;
}
.item {
display: flex;
flex-direction: column;
width: 300px;
}
.item,
.img-wrapper {
align-items: center;
display: flex;
}
img {
max-width: 100%;
}
.img-wrapper {
/* flex-grow: 1; */
flex-shrink: 0;
height: 269px;
width: 291px;
justify-content: center;
}
.excerpt-wrapper > p {
margin: 0;
}
<div class="container">
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
<div class="item">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938</p>
<p>ghostbusting since 1938</p>
</div>
</div>
jsFiddle
If you need the display to adapt to a variable images size, and don't have problems with the width of the container (that is, you can set a size for it beforehand , or at least a maximum widtyh that will be wide enough for the content)
The you can change the flex direction to row, reorder the items so that the images go first, and force a wrap at the end of the images:
.container {
display: flex;
flex-wrap: wrap;
}
.container:after {
content: "";
order: 15;
width: 9999px;
}
.container div {
width: 200px;
}
.img-wrapper {
order: 10;
text-align: center;
}
.excerpt-wrapper {
order: 20;
border-top: solid 1px red;
}
img {
max-width: 100%;
}
<div class="container">
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
</div>
<div class="excerpt-wrapper">
<p>ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 ghostbusting since 1938 </p>
</div>
<div class="img-wrapper">
<img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
</div>
<div class="excerpt-wrapper">
<p>Text goes here</p>
</div>
</div>