CSS отзывчивый горизонтальный и вертикальный макет

Я пытаюсь создать адаптивный макет:

Маленькие области просмотра (например, максимальная ширина 750 пикселей):

    +---------------+
    |      1        |
    +----+-----+----+
    |  2 |     |    |
    +----+  4  |  5 |
    |  3 |     |    |
    +----+-----+----+

Большие окна просмотра (минимальная ширина 751px):

    +---+---+---+---+
    | 1 |   |   |   |
    +---+ 3 | 4 | 5 |
    | 2 |   |   |   |
    +---+---+---+---+

Я пробовал с flex, display: table и другими. Единственное решение, которое я нашел, это дублировать разметку, но это не идеально. Есть ли другая возможность?

Блоки имеют текстовое содержимое переменной длины, поэтому, к сожалению, фиксированная высота не подходит.


html layout css responsive-design responsive
person edo    schedule 20.10.2016    source источник
comment
flex должно работать. в частности, проверьте свойство flex order.   -  person Mr_Green    schedule 20.10.2016
comment
.. также предоставьте код, который вы пробовали.   -  person Mr_Green    schedule 20.10.2016
comment
используйте структуру сетки bootstrap. это поможет вам во многих отношениях для адаптивного дизайна. Вот ссылка   -  person Aalind Sharma    schedule 20.10.2016
comment
@Mr_Green проблема с flex в том, что я не могу реализовать его, используя только один flex-контейнер. Мне нужно два отдельных гибких контейнера (один для вертикально выровненных блоков и один для остальных), поэтому порядок не вариант.   -  person edo    schedule 20.10.2016

Ответы (2)


arrow_upward
2
arrow_downward

Я сделал это, используя flexbox и position: relative.

Рабочая скрипка

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
}
.box {
  box-shadow: inset 0px 0px 0px 1px #ccc;
  flex: 1;
  height: calc(100% / 3);
  line-height: 150px;
  text-align: center;
  position: relative;
}
.one {
  flex: 1 0 100%;
}
.two,
.four,
.five,
.six {
  flex: 1 0 calc(100% / 3);
  /*   min-width: calc(100% / 4) */
}
.four,
.five,
.six {
  height: calc(200% / 3);
}
.three {
  order: 1;
  max-width: calc(100% / 3);
  top: calc(-100% + (200% / 3));
}
@media (max-width: 500px) {
  .one {} .one,
  .two,
  .three,
  .four,
  .five {
    flex: 1 0 calc(100% / 4);
    max-width: calc(100% / 4);
    top: 0px;
  }
  .one,
  .two {
    height: calc(100% / 2);
  }
  .three,
  .four,
  .five {
    height: 100%;
  }
  .two {
    order: 1;
    top: calc(-100% / 2);
  }
  .three {
    order: 0;
  }
}
<div class="parent">
  <div class="box one">1</div>
  <div class="box two">2</div>
  <div class="box three">3</div>
  <div class="box four">4</div>
  <div class="box five">5</div>
</div>

person Mr_Green    schedule 20.10.2016
comment
Спасибо! Это достигает именно того, что я хочу, но высота контейнеров зависит от содержимого, поэтому я не могу иметь фиксированную высоту ни для контейнера, ни для ящиков:/ - person edo; 20.10.2016
comment
@edo Я предлагаю вам объяснить то же самое в вашем вопросе. - person Mr_Green; 20.10.2016

arrow_upward
1
arrow_downward 

.header{
  width:100%;
  height:100px;
  border:1px solid #ff9900;
}
.l1,.l2{
  width:33%;
  float:left;
  border:1px solid green;
  height:100px;
  margin-right:1px;
}
.l3{
  float:right;
  width:32%;
  height:100px;
  border:1px solid red;
}
.a1,.a2,.a3,.a4{
  width:24%;
  float:left;
  border:1px solid green;
  height:100px;
  margin-right:1px;
}
<div class="header">
<h1>header</h1>
</div>
<div class="body">
<div class="l1">
  <div style="width:100%; height:50%; background:#ff8800;">1</div>
  <div style="width:100%; height:50%; background:#ffff00;">2</div>
  </div>
  <div class="l2">3</div>
  <div class="l3">4</div>
</div>
<br/>
This Is Next Lay Out

<div class="header">
<h1>header</h1>
</div>
<div class="body">
<div class="a1">
  <div style="width:100%; height:50%; background:#ff8800;">1</div>
  <div style="width:100%; height:50%; background:#ffff00;">2</div>
  </div>
  <div class="a2">3</div>
  <div class="a3">4</div>
  <div class="a4">5</div>
</div>

Попробуйте один раз

person Samudrala Ramu    schedule 20.10.2016
comment
Спасибо, но это не отвечает. Мне нужен один и тот же макет для работы в обоих случаях, в зависимости от ширины экрана. - person edo; 20.10.2016