Возьмите гибкий элемент из потока - IE11 - PullRequest
Новая
       20

Возьмите гибкий элемент из потока - IE11

0 голосов
/ 03 марта 2020

У меня есть контейнер с display:flex; Внутри этого контейнера у меня иногда будет 2 предмета, а иногда - 3 предмета. Я использую justify-content:space-between; и хочу, чтобы 2 элемента были расположены таким образом. Когда есть 3-й элемент, я все еще хочу, чтобы эти 2 исходных элемента были space-between, а затем я хочу, чтобы 3-й элемент вышел из гибкого потока. Для выполнения sh я использую position:absolute; на 3-м пункте. В Chrome / Firefox / Safari это работает нормально, но в IE абсолютно позиционированный элемент принимает space-between, поэтому позиционирование элемента 2-го элемента отключено (он размещается непосредственно в середине контейнера). Как я могу решить это? Я открыт для альтернативных решений, но я не могу изменить структуру HTML, поэтому это должно быть решение на основе CSS. 

.flex {
  display:flex;
  justify-content:space-between;
  width:250px;
  border:1px solid black;
  padding:5px;
  margin:30px auto;
  position:relative;
}
  .flex.abs {
    padding-left:40px;
  }
    .flex.abs div:first-child {
      position:absolute;
      left:-30px;
    }
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex abs">
  <div>Absolute</div>
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Вот как это выглядит в Chrome (желательно): enter image description here

И вот как это выглядит в IE: enter image description here

Ответы [ 2 ]

1 голос
/ 03 марта 2020

Вы можете сделать это только с margin без необходимости position:absolute

.flex {
  display: flex;
  width: 250px;
  border: 1px solid black;
  padding: 5px;
  margin: 30px auto;
}

.flex div:nth-last-child(3) {
  margin-left: -35px;
  margin-right:10px;
}

.flex div:last-child {
   margin-left:auto;
}
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div>Absolute</div>
  <div>Item 1</div>
  <div>Item 2</div>
</div>
0 голосов
/ 03 марта 2020

Если вы сделаете элемент 1 гибким контейнером, вам не понадобится абсолютное положение,

Вот идея 

.flex {
  display: flex;
  justify-content: space-between;
  width: 250px;
  border: 1px solid black;
  padding: 5px;
  margin: 30px auto;
  position: relative;
}

.flex-start {
  display: flex;
}
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<div class="flex">
  <div class="flex-start">
    <div>Absolute</div>
    <div>Item 1</div>
  </div>
  <div>Item 2</div>
</div>
...