中间和底部对齐挠曲项

Question

中间和底部对齐挠曲项我有一个具有以下属性的FLEX容器(蓝色方块)：display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;因此，它的孩子(浅蓝方格)安排自己，如你所见。但是，我想在正常流之外添加另一个子元素(绿色方格)，并将其相对于其父流进行定位。要像你在下面看到的那样定位它，我最好写一些这样的东西bottom: 20px;和margin: auto;.我试着玩z-index没有结果。我该怎么处理这件事？我应该求助于创建另一个父元素吗？

Answer 1

您可以使用伪移动一行前三个容器，然后应用amargin:auto直到最后一个

div {

  display:flex;

  flex-wrap:wrap;

  border:#0066FD solid;;

  width:200px;

  height:200px;

  justify-content:space-around;

  /* show me box center */

  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%)

 

}

span, div:before {

  width:50px;

  height:50px;

  border:solid #01CDFF;

  margin:0 auto 0;

}

span:last-of-type , div:before{

  margin: 12px auto;

  border:solid  #01FE43;

}

div:before {

  content:'';

  width:100%;

  border:none;

}

span {

   /* show me box center */

  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%)

  }

<div>

  <span></span>

  <span></span>

  <span></span>

  <span></span>

</div>