中間和底部對齊撓曲項我有一個具有以下屬性的FLEX容器(藍色方塊)：display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;因此，它的孩子(淺藍方格)安排自己，如你所見。但是，我想在正常流之外添加另一個子元素(綠色方格)，并將其相對于其父流進行定位。要像你在下面看到的那樣定位它，我最好寫一些這樣的東西bottom: 20px;和margin: auto;.我試著玩z-index沒有結果。我該怎么處理這件事？我應該求助于創建另一個父元素嗎？
3 回答
繁星點點滴滴
TA貢獻1803條經驗 獲得超3個贊
您可以使用偽移動一行前三個容器，然后應用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>
- 3 回答
- 0 關注
- 322 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消