Центрирующие и нижние выравнивающие элементы

У меня есть гибкий контейнер (синий квадрат) со следующими свойствами:

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

Поэтому его дети (голубые квадраты) устраиваются, как вы видите ниже. Тем не менее, я хотел бы добавить другого ребенка (зеленый квадрат) из нормального потока и разместить его относительно его родителя. Чтобы разместить его, как вы видите ниже, я идеально написал бы что-то вроде bottom: 20px; и margin: auto;.

Я попытался поиграть с z-index безрезультатно. Как мне подойти к этому? Должен ли я прибегать к созданию другого родительского элемента?

Ответ 1

Ниже приведены пять вариантов достижения этого макета:

Размещение CSS
Flexbox с невидимым элементом DOM
Flexbox с невидимым псевдоэлементом
Flexbox с flex: 1
Макет таблицы CSS

Метод # 1: Свойства позиционирования CSS

Примените position: relative к контейнеру flex.

Примените position: absolute к элементу зеленого гибкого диска.

Теперь зеленый квадрат абсолютно расположен внутри контейнера flex.

Более конкретно, зеленый квадрат удаляется из потока документов, но остается в пределах ближайшего расположенного предка.

Используйте свойства смещения CSS top, bottom, left и right для перемещения зеленого квадрата вокруг.

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>

Ответ 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>

Ответ 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>