Форум

a45 · #1 (**permalink**) 06.04.2021, 10:21

Добрый день. подскажите пожалуйста - есть блок (flex, flex-wrap:wrap) в блоке 4 элемента 1 2 3 4 (с фиксированной шириной) возможно ли задать правило переноса (при изменении/уменьшении ширины экрана) таким образом:

1 и 4 блок остаються на верху, 2 и 3 блок переносятся вниз

далее (ещё уменьшение):

1 и 4 остаются на верху, 2 переноситься ниже, 3 переноситься ещё ниже

http://prntscr.com/115i30z

рони · #2 (**permalink**) 06.04.2021, 11:09

a45,
картинка это хорошо, но и минимальный макет неплохо было бы увидеть.
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

a45 · #3 (**permalink**) 06.04.2021, 11:34

<div class="wrap">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
</div>

.wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap
}

.block{
  min-width:150px;
  border:1px solid;
  text-align: center;
}

рони · #4 (**permalink**) 06.04.2021, 13:00

a45,
примерно так ...

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
.wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;

}

.block{
    min-width:150px;
    border:1px solid;
    text-align: center;
}
@media screen and (max-width: 480px) {
      .wrap{
   justify-content:  center;
       }

      .block:nth-child(1) {
          order: 1;
      }
      .block:nth-child(2) {
          order: 3;
          margin-left: 25%;
          margin-right: 25%;
      }
      .block:nth-child(3) {
          order: 4;
          margin-left: 25%;
          margin-right: 25%;
      }
      .block:nth-child(4) {
          order: 2;
      }
   }
@media screen and (max-width: 800px) {


      .block:nth-child(1) {
          order: 1;
      }
      .block:nth-child(2) {
          order: 3;  margin-left: calc(48vw - 75px);
          margin-right: calc(48vw - 75px);
      }
      .block:nth-child(3) {
          order: 4;  margin-left: calc(48vw - 75px);
          margin-right: calc(48vw - 75px);
      }
      .block:nth-child(4) {
          order: 2;
      }
   }
    </style>

</head>

<body>
<div class="wrap">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
</div>

</body>
</html>

a45 · #5 (**permalink**) 07.04.2021, 10:18

спасибо !

Форум

Справочник

Discord чат

Курсы javascript