2

есть код:

<div class = 'content'>
    <div class = 'block1'></div>
    <div class = 'block2'></div>
    <div class = 'block3'></div>
</div>

block1 фиксированной ширины block2 фиксированной высоты

block2 и block3 слева от block1

введите сюда описание изображения

Если задать block1 другую ширину, остальные блоки должны на это среагировать соответственно.

Подскажите как лучше такой вариант реализовать?

  1. делать таблицу или использовать display: table не лучший вариант
  2. использовать position хорошо если никакие блоки меняться не будут
  3. использовать flex где изначально задать взаимное отношение блоков

Второй вариант реализовал, но в динамике очень неудобно использовать - надо отслеживать все блоки

Думаю, лучше через flex, но никак не могу понять как это реализовать. При условии что block1.width + block2.width < 100%, т.е. если block2 будет очень узким не должно случиться так, чтобы block3 стал сбоку (справа) от block2

Подскажите как можно реализовать такую схему через flex?

2
  • А разметку менять можно?
    – Qwertiy
    Commented 19 мая 2018 в 20:08
  • Вообще, display: grid отлично подойдёт
    – Qwertiy
    Commented 19 мая 2018 в 20:09

2 ответа 2

3

Первый вариантGrid:

.block1 {
  background-color: red;
  grid-area: block1;
  min-height: 70px;
}

.block2 {
  background-color: green;
  min-height: 70px;
  grid-area: block2;
}

.block3 {
  background-color: yellow;
  min-height: 300px;
  grid-area: block3;
}

.content {
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-areas: "block1 block2" "block1 block3";
}

@media (max-width: 400px){
  .content {
    display: block;
  }
  .block1,
  .block2,
  .block3 {
    width: 100%;
  }
}
<div class='content'>
  <div class='block1'></div>
  <div class='block2'></div>
  <div class='block3'></div>
</div>

Второй вариантFlexbox:

.wrp {
  display: flex;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;
}

.block1 {
  background-color: red;
}

.block2 {
  background-color: green;
  min-height: 70px;
}

.block3 {
  background-color: yellow;
  min-height: 300px;
  flex-grow: 1;
}

.content {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 1;
}
<div class='wrp'>
  <div class='block1 sidebar'></div>
  <div class="content">
    <div class='block2'></div>
    <div class='block3'></div>
  </div>
</div>

9
  • Можно было поменять html?)) Commented 19 мая 2018 в 19:48
  • Не знаю. Вроде нигде не сказано, что нельзя...
    – Get-Web
    Commented 19 мая 2018 в 19:52
  • я просто думал, что есть шаблон и нужно именно к нему стили прописать. А так конечно плюс вам за решение )) Commented 19 мая 2018 в 19:55
  • Может нужно и по шаблону, скоро узнаем)
    – Get-Web
    Commented 19 мая 2018 в 19:59
  • Добавил пример на гридах, без изменения разметки
    – Get-Web
    Commented 19 мая 2018 в 20:10
0

html, body, .content {
  height: 100%;
  margin: 0;
}

.content {
  display: grid;
  grid-template: auto 1fr / auto 1fr;
}

.left {
  background: orange;
  width: 100px;
  grid-row: 1 / span 2;
}

.top {
  background: blue;
  height: 50px;
}

.other {
  background: green;
}
<div class="content">
  <div class="left"></div>
  <div class="top"></div>
  <div class="other"></div>
</div>

2
  • тут как раз тот самый display: grid хотя наверно его и надо применять, раз он для этого создан
    – Zhihar
    Commented 20 мая 2018 в 20:27
  • Его даже можно под IE 10-11 подогнать.
    – Qwertiy
    Commented 20 мая 2018 в 23:23

Ваш ответ

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

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