0

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

3 ответа 3

3

Вероятно, дело не в сочетании флексбокса и 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

2

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

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

* {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>

1

Чтобы применить 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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.