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
    19 мая 2018 в 20:08
  • Вообще, display: grid отлично подойдёт
    – Qwertiy
    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?)) 19 мая 2018 в 19:48
  • Не знаю. Вроде нигде не сказано, что нельзя...
    – Get-Web
    19 мая 2018 в 19:52
  • я просто думал, что есть шаблон и нужно именно к нему стили прописать. А так конечно плюс вам за решение )) 19 мая 2018 в 19:55
  • Может нужно и по шаблону, скоро узнаем)
    – Get-Web
    19 мая 2018 в 19:59
  • Добавил пример на гридах, без изменения разметки
    – Get-Web
    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
    20 мая 2018 в 20:27
  • Его даже можно под IE 10-11 подогнать.
    – Qwertiy
    20 мая 2018 в 23:23

Ваш ответ

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

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