中间和底部对齐挠曲项

Question

中间和底部对齐挠曲项

我有一个具有以下属性的FLEX容器(蓝色方块)：

display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;

因此，它的孩子(浅蓝方格)安排自己，如你所见。但是，我想在正常流之外添加另一个子元素(绿色方格)，并将其相对于其父流进行定位。要像你在下面看到的那样定位它，我最好写一些这样的东西bottom: 20px;和margin: auto;.

我试着玩z-index没有结果。我该怎么处理这件事？我应该求助于创建另一个父元素吗？

Answer 1

您可以使用伪移动一行前三个容器，然后应用amargin:auto直到最后一个div {&nbsp; display:flex;&nbsp; flex-wrap:wrap;&nbsp; border:#0066FD solid;;&nbsp; width:200px;&nbsp; height:200px;&nbsp; justify-content:space-around;&nbsp; /* show me box center */&nbsp; background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%)&nbsp;}span, div:before {&nbsp; width:50px;&nbsp; height:50px;&nbsp; border:solid #01CDFF;&nbsp; margin:0 auto 0;}span:last-of-type , div:before{&nbsp; margin: 12px auto;&nbsp; border:solid&nbsp; #01FE43;}div:before {&nbsp; content:'';&nbsp; width:100%;&nbsp; border:none;}span {&nbsp; &nbsp;/* show me box center */&nbsp; background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%)&nbsp; }<div>&nbsp; <span></span>&nbsp; <span></span>&nbsp; <span></span>&nbsp; <span></span></div>