Как применять position fixed вместе с flexbox

445

26 ноября 2016, 19:42

Доброго времени суток, не так давно начал применять flexbox в верстке, и вот столкнулся с такой проблемой - когда устанавливаю фиксированное позиционирование flex-контейнеру верстка начинает ехать непонятно куда. Из за чего возникает такое поведение? Признаюсь честно данный вопрос не гуглил решил сразу обратиться сюда.

Answer 1

Одинаково себя ведут блок без и с фиксированным позиционированием.

Возможно у Вас в чем-то ошибка. Нужно прилагать код.

* {box-sizing: border-box;} 
 
body, 
html { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
} 
 
.item { 
  width: 5rem; 
  height: 5rem; 
  background: #ccc; 
  margin: .5rem; 
} 
 
.flex { 
  display: flex; 
  flex-flow: row wrap; 
  align-items: center; 
  align-content: center; 
  justify-content: space-between; 
   
  border: 1px solid #eee; 
  margin: 2rem; 
} 
 
.flex.fixed { 
  position: fixed; 
  left: 0; 
  right: 0; 
}

<div class="flex"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div> 
   
<div class="flex fixed"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 2

Вероятно, дело не в сочетании флексбокса и position: fixed, а в свойстве position: fixed как таковом — при его назначении блок занимает столько места по ширине, сколько занимает его контент, а не все 100%.

пример 1: position: relative; display: flex; justify-content: space-around; http://prntscr.com/d48d2s

пример 2: position: fixed; display: flex; justify-content: space-around; http://prntscr.com/d48dyu

Answer 3

Чтобы применить position: fixed; флекс контейнеру, положите все его содержимое в обертку

<div class="outer">
    <div class="anyContainer">
        <div class="wrapperInner">
            // content
        </div
    </div>
</div>
.outer {
  display: flex;
}
.anyContainer { 
  flex: 0 0 300px;
}
.wrapperInner {
  position: fixed;
  top: 0;
  left: 0;
}