中心和底部alignment弹性项目

我有一个flex容器（蓝色方块）具有以下属性：

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

因此，它的孩子（淡蓝色的方块）按照您在下面看到的方式排列。 但是，我想从正常stream程中添加另一个孩子（绿色方块），并将其定位在父母的相对位置。 要定位，如下所示，我最好写一些像bottom: 20px; 和margin: auto; 。

我试图玩z-index无济于事。 我应该如何处理这个？ 我应该诉诸创造另一个父母元素？

Answer 1

以下是实现此布局的五个选项：

1. CSS定位
2. 带不可见DOM元素的Flexbox
3. 具有隐形伪元素的Flexbox
4. 带flex: 1 Flexbox flex: 1
5. CSS网格布局

---

方法＃1：CSS定位属性

应用position: relative对于柔性容器。

将position: absolute应用于绿色弹性项目。

现在，绿色广场绝对位于柔性容器内。

更具体地说，绿色正方形从文档stream中移除，但是停留在最近的定位祖先的范围内。

使用top ， bottom ， left和right的CSS偏移属性来移动绿色方块。

 flex-container { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; position: relative; border: 4px solid blue; height: 300px; width: 300px; } flex-container > flex-item:first-child { display: flex; } flex-container > flex-item:first-child > flex-item { border: 4px solid aqua; height: 50px; width: 50px; margin: 0 5px; } flex-container > flex-item:last-child { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); /* fine tune horizontal centering */ border: 4px solid chartreuse; height: 50px; width: 50px; } 

 <flex-container> <flex-item><!-- also flex container --> <flex-item></flex-item> <flex-item></flex-item> <flex-item></flex-item> </flex-item> <flex-item></flex-item> </flex-container> 

Answer 2

让容器与position: relative和绿色方块与position:absolute;

 body { margin: 0; } #container { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 192px; height: 192px; border: 4px solid indigo; position: relative; background: lavender; } .blue { margin: 10px; width: 30px; height: 30px; outline: 4px solid skyblue; background: honeydew; } #green { position: absolute; width: 30px; height: 30px; left: 0; right: 0; margin: auto; bottom: 20px; outline: 4px solid yellowgreen; background: greenyellow; } 

 <div id=container> <div class=blue></div><div class=blue></div><div class=blue></div> <div id=green></div> </div> 

Answer 3

你可以使用一个伪将前三个容器向下移动一行然后应用一个margin: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>