Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2021, 10:21
a45 a45 вне форума
Новичок на форуме
Отправить личное сообщение для a45 Посмотреть профиль Найти все сообщения от a45
 
Регистрация: 28.12.2019
Сообщений: 5

правила flex wrap
Добрый день. подскажите пожалуйста - есть блок (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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,131

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

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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 06.04.2021, 11:34
a45 a45 вне форума
Новичок на форуме
Отправить личное сообщение для a45 Посмотреть профиль Найти все сообщения от a45
 
Регистрация: 28.12.2019
Сообщений: 5

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,131

css order media
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>
Ответить с цитированием
  #5 (permalink)  
Старый 07.04.2021, 10:18
a45 a45 вне форума
Новичок на форуме
Отправить личное сообщение для a45 Посмотреть профиль Найти все сообщения от a45
 
Регистрация: 28.12.2019
Сообщений: 5

спасибо !
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка значения flex на ходу khusamov ExtJS 3 07.07.2015 20:21
запуск и остановка скрипта при изменении правила display onuvidelsolnce Элементы интерфейса 9 03.02.2014 14:44
Не сохраняются настройки grid Fubu_By ExtJS 1 09.07.2013 20:49
Ищется Программист Adobe Flex (г.Москва) InnaSav Работа 0 14.07.2010 10:38
Вопросы про flex mycoding Оффтопик 3 25.06.2010 11:29