it-swarm.com.ru

Как разместить абсолютно div внутри flex-бокса, не влияя на положение его братьев и сестер?

У меня есть #text внутри flex #container и я хочу расположить что-то под ним:

Как это не может быть учтено при расчете гибкого позиционирования братьев и сестер? 

#container{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}
<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

Как вы заметите, #text немного вверх по центру является родительским, и мне бы хотелось, чтобы идеально было вертикально центрировано, если это возможно, без изменения:

  • Дерево узлов

  • Уже записанные свойства flex (как justify-content в случае нескольких элементов .text)

Правка :

Я нашел другой вопрос по этому вопросу, попробовал решение безрезультатно: Абсолютно позиционированный элемент в гибком контейнере все еще рассматривается как элемент в IE & Firefox

Кажется, это относительная ошибка Firefox и IE (В настоящее время я использую Firefox 47, он работает на Chromium.)

Окончательное редактирование:

Я провел исследование по этому вопросу и нашел много вопросов связанные (дубликаты):

И прямая ссылка на Bugzilla .

7
PaulCo

Как вы обнаружили, в некоторых браузерах абсолютно гибкий элемент учитывается в вычислениях justify-content, несмотря на тот факт, что его следует удалить из обычного потока.

Как определено в спецификации:

4.1. Абсолютно позиционированный Flex Дети

Поскольку это вне потока, абсолютно позиционированный потомок flex Контейнер не участвует в гибкой компоновке.

Однако в Firefox и IE11 абсолютно позиционированные flex-элементы действуют как обычные братья и сестры с точки зрения выравнивания с justify-content.

Вот пример. Он работает в текущих Chrome, Safari и Edge, но не работает в Firefox и IE11.

flex-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: skyblue;
  height: 100px;
}
flex-item {
  background: lightgreen;
  width: 100px;
}
[abspos] {
  position: absolute;
  z-index: -1;
}
<flex-container>
  <flex-item>item 1</flex-item>
  <flex-item>item 2</flex-item>
  <flex-item abspos>item 3</flex-item>
</flex-container>

jsFiddle версия


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

Насколько я понимаю, вы хотите выровнять один изгибаемый элемент снизу, а другой объект должен быть вертикально центрирован в контейнере. Ну, вам не обязательно нужно абсолютное позиционирование для этого. 

Вы можете использовать невидимый псевдоэлемент, который действует как третий элемент flex. Этот элемент будет служить противовесом выровненному снизу элементу DOM и будет держать средний элемент по центру.

Вот подробности:

6
Michael_B

#container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  width: 95vw;
  height: 95vh;
  border: 1px solid black
}
#text{
  font-size: 13px;
  width: 50vw;
  text-align: justify;
}
#absolute{
  position: absolute;
  bottom: 5px;
  left: calc(47.5vw - 25px);
  width: 50px;
  text-align: center;
  color: red;
}
<div id="container">
  <div id="text">
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
  </div>
  <div id="absolute">
    Absolutly
  </div>
</div>

Измените значение justify-content на center. Надеюсь, что это работает сейчас.

2
devhermluna