Адаптивный макет, переупорядочивание виджетов для маленьких экранов - PullRequest
Новая
       22

Адаптивный макет, переупорядочивание виджетов для маленьких экранов

0 голосов
/ 04 декабря 2018

Подобные вопросы уже задавались и были даны ответы (например, this - с одним родительским контейнером или this - который прибегал к решению JS, с сетчатым макетом), но неиз них обеспечено правильное вдохновение;в основном я понимаю, что не могу вынуть flex-дочерние элементы из одного контейнера, с другой стороны, flexbox удобен для изменения порядка блоков, или, возможно, я могу изменить свою разметку, чтобы иметь гибкость компоновки рабочего стола и одновременное изменение порядка расположения мобильных блоков.

Я также понимаю, что могу использовать JS для изменения разметки для разных экранов, но для меня это звучит немного старомодно, поэтому я хотел бы получить новые идеи, как решить эту проблему с помощью современных технологий,в идеале с чистым CSS.И если бы кошелек CSS не использовался, я бы приветствовал легкие идеи JS.

Вариант использования:

У меня есть настраиваемый пользователем макет, где я использую вложенныйконтейнеры, обеспечивающие большую гибкость в конфигурации макета - каждый дочерний элемент можно разделить двумя способами - по горизонтали или по вертикали с неизвестными уровнями вложенности и неизвестными размерами виджетов.На рабочем столе это выглядит примерно так: 

.container {
  width: 100%;
  background: #eee;
}

.split-horizontal,
.split-vertical {
  display: flex;
  width: calc(100%-15px);
  height: 100%;
  flex-basis: 50%;
}

.split-horizontal {
  flex-flow: column;
}

.half {
  flex-basis: 50%;
}

.tall {
  height: 200px;
}

div {
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
  min-height: 50px;
  box-sizing: border-box;
  position: relative;
}

div:before {
  content: "." attr(class);
  color: gray;
  background: #eee;
  border: 1px solid gray;
  padding: 0 5px;
  margin-left: 5px;
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 0.8em;
}

.widget {
  background: navy;
}

.widget.w5 {
  background: blue;
}
<div class="container split-vertical">
  <div class="split-horizontal">
    <div class="half">
      <div class="widget w1"></div>
      <div class="widget w2"></div>
    </div>
    <div class="split-vertical">
      <div class="half">
        <div class="widget w3"></div>
      </div>
      <div class="half">
        <div class="widget w4"></div>
      </div>
    </div>
  </div>
  <div class="split-horizontal">
    <div class="split-vertical">
      <div class="half tall">
        <div class="widget w5"></div>
        <div class="widget w6"></div>
      </div>
      <div class="half">
        <div class="widget tall w7"></div>
      </div>
    </div>
    <div class="half">
      <div class="widget w8"></div>
    </div>
  </div>
</div>

https://codepen.io/peter-sliacky/pen/LXvdaK

На небольших экранах я просто удаляю свойство flex, и оно ведет себя «как-то», но я хотел бы предложитьпользователи могут определять расположение небольших экранов - в основном, просто порядок блоков виджетов (.w5 перемещается после .w2), что-то вроде этого: 

.container {
  width: 300px;
  background: #eee;
}

.split-horizontal {
  flex-flow: column;
  display: flex;
}

div {
  margin: 10px;
  padding: 5px;
  border: 1px solid gray;
  min-height: 30px;
  box-sizing: border-box;
  position: relative;
}

div:before {
  content: "." attr(class);
  color: gray;
  background: #eee;
  border: 1px solid gray;
  padding: 0 5px;
  margin-left: 5px;
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 0.8em;
}

.widget {
  background: navy;
}

.widget.w5 {
  background: blue;
}

.w1, .w2, .w5 {
  order: -1;
}
<div class="container split-horizontal">
  <div class="widget w1"></div>
  <div class="widget w2"></div>
  <div class="widget w3"></div>
  <div class="widget w4"></div>
  <div class="widget w5"></div>
  <div class="widget w6"></div>
  <div class="widget w8"></div>
</div>

https://codepen.io/peter-sliacky/pen/EOJpqr

...