Какой наиболее эффективный способ реализовать этот адаптивный макет из 3 столбцов с пользовательскими правилами переноса?

#css #layout #responsive-design

#css — код #макет #адаптивный дизайн

Вопрос:

Сначала это выглядит как стандартный макет из 3 столбцов, но способ переноса вспомогательных столбцов не является обычным и, похоже, не соответствует модели переноса flexbox ни в прямом, ни в обратном режиме. Возможно, grid — лучшее решение, чем flexbox? Я бы хотел по возможности избегать медиа-запросов, но, конечно, рабочее решение лучше, чем никакого.

Конструктивные ограничения

Когда достаточно места (1200 пикселей), все столбцы отображаются рядом с фиксированной шириной.
Когда остается достаточно места только для MAIN и AUX1 (1000 пикселей), AUX2 оборачивается снизу и заполняет ширину.
Когда достаточно места только для ОСНОВНОГО (800 пикселей), оба вспомогательных столбца оборачиваются под ним и располагаются рядом друг с другом на 50% ширины.
Поскольку экран продолжает уменьшаться, макет остается таким же, как и в 800 пикселей, но все столбцы уменьшаются пропорционально, не выходя за пределы экрана.
Ни одна из трех областей содержимого не может перекрываться или пересекаться.

Ответ №1:

Здесь я создал это специально для вас :).

РЕДАКТИРОВАТЬ: вот новый способ сделать это с помощью сетки, которая будет формироваться для содержимого, добавленного в divs. Пожалуйста, дайте мне знать, если это сработает.

 .contain {
  width: 100%;
  height: 100%;
  text-align: center;
}

.wrap{
   display: inline-flex;
}

.aux2{
  background-color: orange;
  width: 200px;
  display: inline-flex;
}

.main{
  background-color: blue;
  width: 800px;
   display: inline-flex;
}

.aux1{
  background-color: green;
   width: 200px;
    display: inline-flex;
}


@media (max-width: 1200px){
  .wrap{
   display: grid;
   justify-items: center;
   grid-template-areas: auto auto;
   grid-template-rows: auto auto;
}

.aux2{
  background-color: orange;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 1 / span 2;
}

.main{
  background-color: blue;
  width: 800px;
   display: inline-flex;
    grid-row: 1;
}

.aux1{
  background-color: green;
  width: 200px;
  display: inline-flex;
   grid-row: 1;
}
}

@media (max-width: 1000px){
  .wrap{
   display: grid;
   grid-template-areas: auto auto;
   grid-template-rows: auto auto;
}

.aux2{
  background-color: orange;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 1;
}

.main{
  background-color: blue;
  width: 100%;
   display: inline-flex;
   grid-row: 1;
   grid-column: 1 /span 2;
}

.aux1{
  background-color: green;
  width: 100%;
  display: inline-flex;
  grid-row: 2;
  grid-column: 2;
}
}

 <div class="contain">
<div class="wrap">
<div class="aux2">aux2</div>
<div class="main">main</div>
<div class="aux1">aux1</div>
</div>
</div>

Развернуть фрагмент

1. К сожалению, это всего лишь визуальный трюк, который можно увидеть, если заполнить контейнеры содержимым и / или добавить границы. Любое решение, включающее абсолютное позиционирование, следует считать недействительным. То есть области содержимого перекрываются.

2. @QuolonelQuestions Я добавил новый метод к своему ответу, используя сетку. Пожалуйста, посмотрите и дайте мне знать, работает ли это для вас.