loratokareva
@loratokareva
html верстальщик

Как правильно выставить пропорции для flex?

Имеем макет 1080 шириной
<section class="carcass">
    <div class="carcass__left">
          левая часть
    </div>
   <div class="carcass__right">
         правая часть
   </div>
</section>


Как правильно прописать, чтобы при резайзе (сжатие) левая колонка не меняла размер, а сжималась только правая?
.carcass {
  display: flex;
  flex-direction: row;
  &__left {
    flex-basis: 265px;
  }

  &__right {
    flex-basis: 805px;
  }
}
  • Вопрос задан
  • 635 просмотров
Пригласить эксперта
Ответы на вопрос 1
nikolayshabalin
@nikolayshabalin
Автор профессиональных курсов в HTML Academy
Вам нужно сделать так, чтобы левая часть была статичной

.carcass__left {
  flex-basis: 265px;
}

flex-basis - говорит, сколько занимать места до распределения пустого пространства (криво выразился наверное)

а правая тянулась на всё свободное пространство
.carcass__right {
  flex-grow: 1;
}


flex-grow -как раз то свойство, которое заставляет тянуться по основной оси.

Если же вы хотите, чтобы левый блок даже при недостаточном пустом пространстве тоже не сужался, то понадобится flex-shrink

.carcass__left {
  background-color: green;
  flex-basis: 265px;
  flex-shrink: 0;
}


Полный код тут - https://codepen.io/aurfon/pen/odXxPy
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы