How to left align an image in a flex container? - html

Question

I'm trying to get the image to appear on the left with content on the right.
desired output would be:
my images on the below appear above the content. I've tried a number of things with the flex-direction but just can't get the image to appear on the left.
here's my cut down code, any suggestions would be greatly appreciated.
<style>html {
background: #f5f7f8;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
padding: 20px 0;
}
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
#media only screen and (min-width: 500px) {
.band {
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1/ span 2;
}
.item-1 h1 {
font-size: 30px;
}
}
#media only screen and (min-width: 850px) {
.band {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* card */
.card {
min-height: 100%;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
text-decoration: none;
color: #444;
position: relative;
top: 0;
transition: all .1s ease-in;
}
.card:hover {
top: -2px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
.card article {
padding: 20px;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
}
.card .thumb {
padding-bottom: 60%;
background-size: cover;
background-position: center center;
}
.card p {
flex: 1;
/* make p grow to fill available space*/
line-height: 1.4;
}
/* typography */
h1 {
font-size: 20px;
margin: 0;
color: #333;
}
.card span {
font-size: 12px;
font-weight: bold;
color: #999;
text-transform: uppercase;
letter-spacing: .05em;
margin: 2em 0 0 0;
}
</style>
<div class="support-grid"></div>
<div class="band">
<div class="item-4">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-5">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-6">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-7">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
</div>

Answer 1

Change flex-direction: column; to flex-direction: row; on card. Then you just have to define a width for thumb because you are using it as a background image. So I set width: 100%; to thumb.
html {
background: #f5f7f8;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
padding: 20px 0;
}
.band {
width: 90%;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-gap: 20px;
}
#media only screen and (min-width: 500px) {
.band {
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1/ span 2;
}
.item-1 h1 {
font-size: 30px;
}
}
#media only screen and (min-width: 850px) {
.band {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
/* card */
.card {
min-height: 100%;
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: row;
flex-flow: row;
text-decoration: none;
color: #444;
position: relative;
top: 0;
transition: all .1s ease-in;
}
.card:hover {
top: -2px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
}
.card article {
padding: 20px;
display: flex;
flex: 1;
justify-content: space-between;
flex-direction: column;
}
.card .thumb {
padding-bottom: 60%;
background-size: cover;
background-position: center center;
}
.card p {
flex: 1;
/* make p grow to fill available space*/
line-height: 1.4;
}
/* typography */
h1 {
font-size: 20px;
margin: 0;
color: #333;
}
.card span {
font-size: 12px;
font-weight: bold;
color: #999;
text-transform: uppercase;
letter-spacing: .05em;
margin: 2em 0 0 0;
}
.thumb {
width: 100%;
}
<div class="support-grid"></div>
<div class="band">
<div class="item-4">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-5">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-6">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
<div class="item-7">
<a href="#" class="card">
<div class="thumb" style="background-image: url(https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg);"></div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>
</div>
</div>

Answer 2

Start by focusing on these two areas:
In your code, the flex container is set to flex-direction: column. This makes your image and the article (i.e., the flex items) stack vertically. Remove this column setting so that the items can line up in a row (which is the default setting).
The flex container will work better if you render the item with HTML (using the img tag) as opposed to CSS (using the background-image property). It will work even better if you wrap the img in a figure, div or other HTML element, as images seem to be problematic for some browsers when they're flex items. The common solution is to make the wrapper a flex item.
.card {
display: flex;
/* flex-direction: column; */
}
div {
width: 200px;
}
img {
width: 100%;
height: auto;
}
.card article {
padding: 20px;
}
<a href="#" class="card">
<div>
<img src="https://thumbs.dreamstime.com/z/positive-pension-happiness-money-saving-retirement-financia-positive-pension-happiness-money-saving-retirement-financial-118207382.jpg">
</div>
<article>
<h1>title</h1>
<p></p>
<span>content</span>
</article>
</a>

Answer 3

Setting the .card class flex-direction to this:
.card {
flex-direction: row;
}
and adding: flex: 1 0 1%; width:1%; to article and .thumb should get you started.