Блог

Главная - Вопросы по программированию - Как мне переместить элемент flexbox в другую строку?

Как мне переместить элемент flexbox в другую строку?

#css #flexbox

#css #flexbox

Вопрос:

На странице есть элементы, которые расположены в ряд на рабочем столе. В мобильной версии один из элементов, который находится посередине, должен быть размещен на новой строке, как 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>

Ответ №1:

Вы можете попробовать, как показано ниже:

 .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 screen and (max-width: 720px) {
  .container {
    flex-wrap: wrap;
  }
  .item:nth-child(2) {
    order: 3;
  }
  .item:nth-child(3) {
    margin-left: calc(100% - 200px); /* 200px is width of 2 boxes */
  }
}  
 <div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>