CODEWITHSUNDEEP
htmlcssflexboxalignment
Roel Voordendag
Roel Voordendag

Reputation: 65

Align over bottom flexbox

Hi I want my circles to align over the end of my container. But I have a hard time aligning the content at the bottom with flexbox. Maybe you can help. I aling-content: end-flex does not work. Every time try it it aligns the circles somewhere in the middle. And does no space between the circles. I am new to flexbox so maybe I over see a simple solution.

.wrapper-project{
display:flex;
flex-direction: column;
}


.project-pill{
z-index: 0;
 position: relative;
margin: 0 auto;
border-radius: 4vw;
background-color: #DBDDDC;
width: 25vw;
min-height: 35vw;
position: relative;
}
.project-pill:hover{
  box-shadow:10px 10px 10px grey;  
  opacity: 1%;
  transform: scale(1.2);

}
.image{
border-radius: 4vw 4vw 0 0;
width: 95%;
padding-top: 2%;
height: 40%;
margin-left: auto;
margin-right: auto;
}
.content{
 position: absolute;
 width: 100%;
 font-size: 1.2vw;
  height: 100%;
  text-align: center;
  font-family: poppins;
 }
 .text{

  overflow: hidden;

}
.flex-circles{
display: flex;
align-items: center;
justify-content: center; 
}
.circle{
margin-bottom: auto;    
width:30%;
border-radius:50%;
padding-bottom:30%;
z-index: 1000;
background-image: url(https://www.demaesschalckgoethals.be/files/images/
01a59d76ec5642699cdbb25466 
9ed025.jpg);
background-size:cover;
background-repeat: no-repeat;   

 }
<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">
            <img class="image" 

           src="https://www.demaesschalckgoethals.be/files
           /images/01a59d76ec5642699cdbb2546 
           69ed025.jpg"/>
            <div class="text">
                <p>test</p>
            </div>
        <div class="flex-circles">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
    </div>
</div>

Here is a example.

https://jsfiddle.net/RoelVoordendag/hmjvoLzb/1/

Upvotes: 1

Views: 51

Answers (1)

Luis Serrano
Luis Serrano

Reputation: 1390

You need flex in .content. If you have it on .flex-circles, and given your HTML structure, the circles will never be at the end of the container as you want it:

display: flex;
flex-direction: column;
justify-content: space-between;

This is your code updated:

https://jsfiddle.net/hmjvoLzb/16/

Is this closer to what you wanted to achieve? Hope it helps.

Upvotes: 1

Related Questions