CODEWITHSUNDEEP
htmlcssflexbox
Jordn
Jordn

Reputation: 25

Flexbox Content Align

I've been struggling to make the content within the flexbox items align equally.

enter image description here

As you can see, the three of them are equal height, but what I want to achieve is make all the paragraphs align/scale with the other ones.

.grid-chefs {
  display: flex;
  width: 100%;
  text-align: center;
  align-items: stretch;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}
<div class="grid-chefs">
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Upvotes: 2

Views: 70

Answers (2)

Kaivosukeltaja
Kaivosukeltaja

Reputation: 15735

CSS Flexbox doesn't allow you to align items inside separate parents. You could work around it by using the new CSS Grid layout with display: contents for the columns but the browser support for the latter is still quite far from satisfactory.

For now you need to have fixed height for your images and headings if you want to align your paragraphs in a browser compatible manner.

.grid-chefs {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  text-align: center;
  align-items: stretch;
  grid-template-rows: auto auto auto;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
  display: contents;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}
<div class="grid-chefs">
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Upvotes: 1

Viira
Viira

Reputation: 3911

As I commented before you have to add min-height to your h3 tags

Else consider reducing the font size of your headings

Try this

        .grid-chefs {
        display: flex;
        width: 33%;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        margin:auto;
    }

    .cfcol {
        width: 32%;
        line-height: 1.2;
    }

    .cfcol > img {
        max-width: 100%;
        max-height: 100px;
    }

    .cfcol > h3{
        font-size: 22px;
        min-height:75px;
        display:flex; 
        align-items: center;
    }
    <div class="grid-chefs">
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Smith</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Smith Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

Also a working codepen example: https://codepen.io/anon/pen/VVqrYL

Upvotes: 1

Related Questions