在底部 flexbox 上对齐答案

【问题标题】：Align over bottom flexbox在底部 flexbox 上对齐
【发布时间】：2018-08-24 03:13:39
【问题描述】：

您好，我希望我的圆圈与容器的末端对齐。但是我很难将底部的内容与 flexbox 对齐。也许你可以帮忙。我 aling-content: end-flex 不起作用。每次尝试它都会将圆圈对齐在中间的某个地方。并且圆圈之间没有空间。我是 flexbox 的新手，所以也许我看到了一个简单的解决方案。

.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>

这是一个例子。

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

【问题讨论】：

您可以使用 StackOverflows sn-p 功能代替外部页面。此外，显示实际站点和希望站点的屏幕截图和模型也会有所帮助。
margin-top:auto 到圆形容器将解决此问题

标签： html css flexbox alignment

【解决方案1】：

您需要在.content 中使用 flex。如果您将它放在.flex-circles 上，并且给定您的 HTML 结构，那么圆圈将永远不会像您想要的那样位于容器的末尾：

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

这是您更新的代码：

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

这是否更接近您想要实现的目标？希望对您有所帮助。

【讨论】：