Align items in flexbox to items in another flexbox

Question

I'm developing a simple webpage with elements of flexbox. In one section I have logos of project with description to them. Unfortunately, all of the projects have logos in a different size. How can I receive the result as on picture?

My current code (HTML)

 <div id="Projects">
   <a href="http://www.project1.com">
     <div id="ProjectL">
       <img class="img-responsive" src="{% static 'images/logos/project1.png' %}" alt="project" style=" margin-left: auto; max-width: 200px; align-items: flex-start;">
        <div id="desk" style="align-items: flex-end;"> Project ONE</div>
     </div>
   </a>
   <a href="http://www.project2.com">
    <div id="ProjectL">
     <img class="img-responsive" src="{% static 'images/logos/project2.png' %}" alt="project" style=" margin-left: 35px;  max-width: 200px; align-items: flex-start;">
     <div id="desk" style="align-items: flex-end;">Project TWO</div>
   </div>
 </a>
<a href="http://www.project3.com">
  <div id="ProjectL">
   <img class="img-responsive" src="{% static 'images/logos/project3' %}" alt="project" style=" margin-left: 35px;  max-width: 200px; align-items: flex-start;">
    <div id="desk" style="align-items: flex-end;"> PROJECT THREE</div>
 </div>
</a>
<a href="http://www.project4.com">
 <div id="ProjectL">
  <img class="img-responsive" src="{% static 'images/logos/project4' %}" alt="project" style=" margin-left: 35px; margin-right: auto; max-width: 200px; align-items: flex-start;">
   <div id="desk" style="align-items: flex-end;"> Project FOUR</div>
  </div>
</a>
  </div>

CSS

#Projects {
    display: flex;
    flex-direction: row;
    font-family: sans-serif;
    padding-bottom: 40px;
}

#ProjectL {
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    padding-bottom: 40px;
}

samkitson · Accepted Answer · 2020-10-04T11:53:52.583

I created a really quick Codepen with a solution that works if you know that your logos aren't going to have heights higher than the container I called projects__item-top. Maybe you could set a maximum size for the logos?

Here's the code:

HTML

<div class="projects">
  <a class="projects__item" href="www.link.com" aria-label="Project 1">
    <div class="projects__item-top">
      <img src="https://source.unsplash.com/random/200x60" alt="" />
    </div>
    <div class="projects__item-description">
      <h3>Description 1</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </a>
  <a class="projects__item" href="www.link.com" aria-label="Project 2">
    <div class="projects__item-top">
      <img src="https://source.unsplash.com/random/200x50" alt="" />
    </div>
    <div class="projects__item-description">
      <h3>Description 2</h3>
    </div>
  </a>
  <a class="projects__item" href="www.link.com" aria-label="Project 3">
    <div class="projects__item-top">
      <img src="https://source.unsplash.com/random/200x70" alt="" />
    </div>
    <div class="projects__item-description">
      <h3>Description 3</h3>
    </div>
  </a>
</div>

CSS

html * {
  box-sizing: border-box;
}

.projects {
  display: flex;
  flex-direction: row;
}

.projects__item {
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
}

.projects__item-top {
  display: flex;
  height: 120px;
  align-items: center;
}

I noticed you were using id where you should be using class. An id has to be unique but a class can be re-used.

I hope this helps! Let me know if you have any other issues with it.

score -1 · Answer 2 · answered Oct 04 '20 at 12:19

I've made this layout add your content inside of it:

HTML

<div class="container">
        <div class="project">
            <div class="logo-wrapper1">
                <div class="logo1">logo 1</div>
            </div>
            <div class="description-wrapper">
                <div class="description">Description 1</div>
            </div>
        </div>
        <div class="project">
            <div class="logo-wrapper2">
                <div class="logo2">logo 2</div>
            </div>
            <div class="description-wrapper">
                <div class="description">Description 2</div>
            </div>
        </div>
        <div class="project">
            <div class="logo-wrapper3">
                <div class="logo3">logo 3</div>
            </div>
            <div class="description-wrapper">
                <div class="description">Description 3</div>
            </div>
        </div>
    </div>

CSS

* {
    box-sizing: border-box;
}
.container {
    display: flex;
    padding: 10px;
    border: 1px solid red;
    height: 300px;
}

.project {
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    padding: 10px;
    margin-right: 10px;
}

.logo-wrapper1, .logo-wrapper2, .logo-wrapper3 {
    display: flex;
    align-items: center;
    padding: 10px;
    height: 100px;
}

.logo1 {
    display: flex;
    align-items: center;
    border: 1px solid black;
    height: 100%;
    width: 100%;
}

.logo2 {
    display: flex;
    align-items: center;
    border: 1px solid black;
    height: 50%;
    width: 100%;
}

.logo3 {
    display: flex;
    align-items: center;
    border: 1px solid black;
    height: 80%;
    width: 100%;
}

.description-wrapper {
    margin-top: 10px;
    padding: 10px;
    height: 100px;
    border: 1px solid black;
}

Align items in flexbox to items in another flexbox

2 Answers2