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 ></div>

<div >

  <div >
    <a href="#" >

      <div  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 >
    <a href="#" >

      <div  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 >
    <a href="#" >

      <div  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 >
    <a href="#" >


      <div  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>

CodePudding user response：

Start by focusing on these two areas:

1. 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).

2. 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="#" >
  <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>

CodePudding user response：

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.