Отзывчивый flexbox и переупорядочение подчиненных - PullRequest
Новая
       45

Отзывчивый flexbox и переупорядочение подчиненных

3 голосов
/ 31 января 2020

Мне нужна помощь с отзывчивым html.

У меня есть макет flexbox с двумя столбцами. Каждый столбец содержит два элемента различной высоты.

columns

На мобильном устройстве я задаю flex-direction для столбца, поэтому он разбивается на один столбец:

one-column

Но, как вы уже догадались, я хочу, чтобы ордер был ABCD. Я понимаю, что, вероятно, я не могу сделать это с моими текущими настройками, потому что AFAIK вы не можете заказать под-детей. Но каковы мои варианты получения желаемого результата?

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

Может ли это быть достигнуты? Нужно ли мне CSS гриды для этого?

Я добавил фрагмент, чтобы проиллюстрировать проблему. Также на codepen: https://codepen.io/Mudloop/pen/PowrKPV

(для простоты он не имеет медиа-запросов, только тот же html дважды с другим классом). 

* { box-sizing: border-box; }
body { background-color: #444; color: white; font-family: sans-serif; max-width:650px; }

.normal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 20px;
}
.normal > div {
  color: white;
  width: calc(50%);
}
.normal > div > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}


.mobile {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  margin:20px;
}

.mobile > div {
  color: white;
  width: 100%;
}
.mobile > div > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}
<body>
  Desktop
  <div class="normal">
    <div>
      <div>A<br></div>
      <div>C<br><br><br><br><br></div>
    </div>
    <div>
      <div>B<br><br></div>
      <div>D<br><br><br></div>
    </div>
  </div>

  Mobile
  <div class="mobile">
    <div>
      <div>A<br></div>
      <div>C<br><br><br><br><br></div>
    </div>
    <div>
      <div>B<br><br></div>
      <div>D<br><br><br></div>
    </div>
  </div>
</body>

Ответы [ 2 ]

1 голос
/ 31 января 2020

Вы можете использовать многостолбцовый макет для рабочего стола.
И переключиться на flex (что позволяет повторно order элементов) на мобильном телефоне с помощью медиазапроса.

Запустите приведенный ниже пример в режиме Full page и попробуйте изменить размер окна:
(я добавил текст в блоки, чтобы сделать их более реальными) 

* {
  box-sizing: border-box;
}

body {
  background-color: #444;
  color: white;
  font-family: sans-serif;
  max-width: 1280px;
  width: 100%
}

.normal {
  padding: 10px;
  border: solid 1px #ccc;
  margin: 20px;
  columns: 2 200px;
  column-fill: balance;
}

.normal>div {
  margin: 0 0 10px;
  padding: 10px;
  background-color: #333;
  page-break-inside: avoid;
}

@media (max-width:480px) {
  .normal {
    display: flex;
    flex-direction: column
  }
  .normal>div:nth-child(1) {
    order: 1
  }
  .normal>div:nth-child(2) {
    order: 3
  }
  .normal>div:nth-child(3) {
    order: 2
  }
  .normal>div:nth-child(4) {
    order: 4
  }
}
Desktop
<div class="normal">
  <div>A<br>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</div>
  <div>C<br>The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful
    when the focus is meant to be on design, not content.</div>
  <div>B<br>It usually begins with:<br>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”</div>
  <div>D<br> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</div>
</div>
0 голосов
/ 31 января 2020

Да, вы можете сделать это с помощью свойства order дочерних элементов внутри контейнера с display: flex в сочетании с медиа-запросами без использования сетки. Я не уверен, каковы ограничения для вашего макета относительно структуры HTML, поэтому я немного изменил ее.

Я использовал максимальную высоту для макета «рабочего стола», чтобы вынудить гибкие элементы обтекать потоком столбцов. Затем, когда медиазапрос был запущен (вы установили для него любой размер мобильного устройства, который вы поддерживали), максимальная высота удаляется, и элементы внутри могут настраиваться в столбце в соответствии с указанным свойством order.

Вы можете добавить это в коде, поиграть с размером окна, и оно должно работать. 

<body>
  Desktop
  <div class="normal">
      <div id="a">A<br></div>
      <div id="c">C<br><br><br><br><br></div>
      <div id="b">B<br><br></div>
      <div id="d">D<br><br><br>
    </div>
  </div>


* { box-sizing: border-box; }
body { background-color: #444; color: white; font-family: sans-serif;  }

.normal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 20px;
  max-height: 200px;
}
.normal > div {
  color: white;
  width: calc(50%);
}
.normal > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}

@media (max-width: 500px) {

  .normal {
    display: flex;
    flex-direction: column;
    flex-wrap: none;
    align-items: center;
    max-height: none;
  }

  #a {
    order: 1
  }

  #b {
    order: 2
  }

  #c {
    order: 3
  }

  #d {
    order: 4
  }

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...