0

Имеется три блока: один большой и два боковых.
Подскажите, как прижать боковые блоки к краям главного блока?
т.е. чтобы боковые блоки были всегда прижаты снизу и сверху, в зависимости от размера экрана.
https://jsfiddle.net/k7L389js/

.main{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  max-height: 766px;
  border: 1px solid gray;
}
.left{
  width: 70%;
  flex-basis: 70%;
  padding: 5px;
}
.left-item{
   background: gray;
   border: 1px solid #000;
}
.right{
  width: 29%;
  flex-basis: 29%;
  flex-flow: row wrap;
  padding: 5px;
  height: 100%;
}
.right-item{
  background: gray;
  border: 1px solid #000;
  max-height: 49%;
}
img{
  max-width: 100%;
  height: auto;
}
<div class="main">
  <div class="left">
    <div class="left-item">
      <a href="#">
        <img src="http://images.astronet.ru/pubd/2005/02/26/0001203055/illume_wasilewski_full.small.jpg" alt="">
      </a>
    </div>
  </div>
  <div class="right">
    <div class="right-item">
      <a href="#">
        <img src="http://images.astronet.ru/pubd/2005/02/26/0001203055/illume_wasilewski_full.small.jpg" alt="">
      </a>
    </div>
    <div class="right-item">
      <a href="#">
        <img src="http://images.astronet.ru/pubd/2005/02/26/0001203055/illume_wasilewski_full.small.jpg" alt="">
      </a>
    </div>
  </div>
</div>

1
  • Есть ли идеи, как это сделать?
    – word
    2 авг 2017 в 8:18

1 ответ 1

2

Расположение блоков на второстепенной оси регулируется свойством align-items. Ставим

.main{
  align-items: stretch;
}

Но свойство не будет работать, если не убрать лишние значения высоты блоков

.right{
  /*  height: 100%; */
}

Так-же активируем flex для правой колонки

.right{
  display: flex;
}

И вот и все: https://jsfiddle.net/k7L389js/2/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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