Вход

Просмотр полной версии : правила flex wrap

a45
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
рони
06.04.2021, 11:09
a45,
картинка это хорошо, но и минимальный макет неплохо было бы увидеть.
Пожалуйста, отформатируйте свой код!

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


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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
a45
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;
}
рони
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
07.04.2021, 10:18
спасибо !