Can't align flexbox correctly with justify-content
I am trying to create a container that has two divs on top and on each side, and other content at the bottom. I did it using flexbox. I can align the bottom content the way I want, but the top content aligns the top, but not the right and left. I thought that using
justify-content: space-between;
will be his point. I have also tried putting .social div withmargin-left: auto;
This is my code:
.boxes {
background-size: cover;
background-position: center center;
display: flex;
align-items: flex-end;
background-color: red;
width: 50%;
}
.branding {
display: flex;
align-items: flex-start;
justify-content: space-between;
height: 200px;
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
What am I missing here?
-Thank
+3
source to share
2 answers
I think you just need the boxes to fold the direction into the column:
.boxes {
background-size: cover;
background-position: center center;
display: flex;
flex-direction:column; /* add this */
background-color: red;
width: 50%;
}
.branding {
width:100%;
display: flex;
flex-direction:row;
justify-content: space-between;
height: 200px; /* this seems to cause a big vertical gap that isn't in your original */
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
+3
source to share
You have to make these two items display: flex;
and remove the flex display on the container
.boxes {
background-size: cover;
background-position: center center;
background-color: red;
width: 50%;
}
.branding {
display: flex;
justify-content: space-between;
height: 100px;
}
.content {
display: flex;
justify-content: center;
}
<div class="boxes">
<div class="branding">
<div class="logo">logo</div>
<div class="social">social</div>
</div>
<div class="content">
<div>
<h2>Case Study Title</h2>
<p>A catchy description for our case study. We worked hard.</p>
</div>
</div>
</div>
+3
source to share