CODEWITHSUNDEEP
htmlcssflexbox
Mark Barrett
Mark Barrett

Reputation: 23

Text and Images in Column - align image

I have two or more columns with an image + text flow.

Image size could be 50 to 400px, text from 1 line to 2 paragraphs 

+---+
|   | +---+ 
|   | |   |
+---+ +---+
text  text
text  text
text
text

Is it possible using flex to align about the bottom of the images without using js?

* { box-sizing: border-box; }

body { line-height: 1.5; }

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap row;
  max-width: 60rem;
  margin-right: auto;
  margin-left: auto;
}

.col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 33.33333%;
  padding-right: .5rem;
  padding-left: .5rem;
}

.col-img {
  display: flex;
  flex: 1 0 auto;
  overflow: hidden;
  align-items: flex-end;
}

img {
  width: 100%;
  height: auto;
}

.col-content {
  flex: 1 0 auto;
}
<div class="row">
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x200">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x300">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
  <div class="col">
    <div class="col-img">
      <img src="//placehold.it/600x400">
    </div>
    <div class="col-content">
      <h1>Title</h1>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
      <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    </div>
  </div>
</div>

https://jsfiddle.net/87j37r81/

Upvotes: 2

Views: 85

Answers (2)

Asons
Asons

Reputation: 87191

For that to work you need to drop the col rule/markup and use the order property to group them.

And the reason it doesn't work with the col elements is because then the row's can't see each other and won't be able to align vertical. (unless you give col-img a fixed height, but I assume you don't want that)

That, together with align-items: flex-end, will give the expected result.

The flex-basis will make them take equal width and break line, and with the order you place the image first.

* {
  box-sizing: border-box;
}

body {
  line-height: 1.5;
}

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 60rem;
}

.col-img {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  order: -1;
}

.col-img img {
  width: 100%;
  height: auto;
}

.col-content {
  flex-basis: calc(33.33% - 20px);
  margin: 10px;
}
<div class="row">
  <div class="col-img">
    <img src="//placehold.it/600x200">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>

  <div class="col-img">
    <img src="//placehold.it/600x300">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>

  <div class="col-img">
    <img src="//placehold.it/600x400">
  </div>
  <div class="col-content">
    <h1>Title</h1>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
    <p>Tousled cronut twee echo park la croix, church-key readymade wayfarers flexitarian mustache ethical semiotics microdosing cliche quinoa</p>
  </div>
</div>

Upvotes: 2

Tree
Tree

Reputation: 264

Try this? Flexbox Guide

div#imageContainer {
  height: 160px;  
  align-items: flex-end;
  display: flex;
  flex-direction: column;
}

Upvotes: -1

Related Questions