Flex как перенести объект на другую строку?

Question

На странице есть элементы, которые при десктопе расположены в ряд. При мобильной версии один из элементов, который находится по середине должен располагаться на новой строке, как при помощи flex это можно сделать?

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 1

Не думаю что Flex предполагает такое расположение элементов, но этого можно добиться таким 'костылем':

@media screen and (max-width: 500px) {
    .item:nth-child(2) {
        transform: translate(-100%,100%);
     }
 }

Answer 2

Не меняя разметку, добиться желаемого результата только с помощь flex, проблематично.

Однако, если ширина блоков известна, можно сделать следующие действия:

задать order красному блоку, это позволит вывести его после синего
Чтобы элементы переносились на новую строку, необходимо
1. установить flex-wrap: wrap
2. элементы не должны вмещаться в ширину контейнера
чтобы перенесся красный блок, нужно, чтобы сумма ширин синего и зеленого блоков была 100%. Добиться этого можно установив синему блоку margin нужной величины, сделать это можно помощью calс, из 100% нужно вычесть сумму ширин блоков, в данном случае 200px: calc(100% - 200px)

В итоге может получиться следующее:

при обычном виде красный блок перенесется, при раскрытии на всю страницу - нет.

.container {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  display: block;
}

.item:nth-child(1) {
  background: green;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: blue;
  margin-left: auto;
}

@media (max-width:650px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px);
  }
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

flex-wrap: wrap; Допустим, у тебя есть контейнер флекс-бокс. В нём 3 кубика по 200 px. Они помещаются только в контейнер, где 600 px. Если он станет меньше, то все элементы внутри будут смещаться

 html

    <div class="container">
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box purple"></div>
    </div>

css

.container{
  margin: auto;
  display: flex;
  width: 600px; /*Можешь поменять значения, чтобы увидеть как работает flex-wrap*/
  outline: 5px solid black;
  flex-wrap: wrap;
}
.box{
  width: 200px;
  height: 200px;
  outline: 1px solid tomato;
}
.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.purple{
  background-color: purple;
}

Второе решение можно сделать, прописан @media для определённой ширины. Там, ты можешь прописать flex-direction: column; чтобы твои элементы были расположены как надо (ТВ

БЛОГ НА HUSL

Flex как перенести объект на другую строку?

Ответы (3 шт):