Блог

Главная - Вопросы по программированию - Выровняйте первый гибкий элемент по гибкому концу

Выровняйте первый гибкий элемент по гибкому концу

#html #css #flexbox

Вопрос:

Я не могу коснуться HTML-файла, и не серые элементы не должны изменять его положение

Я пытаюсь, чтобы этот .grey пункт был внизу остальных 4 пунктов. Я знаю, что есть еще один вопрос, очень похожий на этот, но они работают со столбцами, а я нет, поэтому ни один из ответов там мне не помог.

 .red {
  background-color: #900;
}

.green {
  background-color: #090;
}

.blue {
  background-color: #00F;
}

.purple {
  background-color: #63C;
}

.grey {
  background-color: #666;
}

.container {
  background-color: #FFF;
  width: 50%;
  height: 70%;
  min-height: 400px;
  margin: auto;
  border: 2px solid black;
}

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

.item {
  width: 45%;
  margin-bottom: 5%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 0;
}

.item:last-child {
  width: 100%;
} 
 <div class="container">
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <div class="item purple"></div>
  <div class="item grey"></div>
</div>

Мне нужно, чтобы серый прямоугольник был внизу

Мне нужно, чтобы серый прямоугольник был внизу

Комментарии:

1. Пожалуйста, опубликуйте скриншот того, как должен выглядеть окончательный макет.

2. Почему у вас есть flex-wrap: wrap-reverse; ?

3. Я не могу изменить порядок символов в HTML, и если я не буду использовать flex-wrap: wrap-reverse , цвета будут в другом порядке.

Ответ №1:

Вы можете добавить order в элемент. Он будет выравниваться там, где вы хотите.

 <div class="container">
    <div class="item red"></div>
    <div class="item green"></div>
    <div class="item blue"></div>
    <div class="item purple"></div>
    <div class="item grey"></div>
</div>
 
 .red { background-color: #900; }
.green { background-color: #090; }
.blue { background-color: #00F; }
.purple { background-color: #63C; }
.grey { background-color: #666; }

.container {
    background-color: #FFF;
    width: 50%;
    height: 70%;
    min-height: 400px;
    margin: auto; 
    border: 2px solid black;
}

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

.item {
    width: 45%;
    margin-bottom: 5%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
}

.item:last-child{
    width: 100%;
    order: -1; // It will make this item as first. Since it is reversed, this will be the last.
}

Ответ №2:

вы можете легко сделать это с помощью добавления заказа в .grey класс

  .grey{
    order: -1;
    width: 100%; 
}

поскольку это оправдание-содержимое является обратным переносу ,
в случае , если вы используете перенос, вы можете добавить order: 1; или выше.

Ответ №3:

Если вы хотите, чтобы класс div .item grey был внизу, в данном конкретном случае Вам нужно перейти flex-wrap: wrap-reverse на flex-wrap: wrap это 😉 С наилучшими пожеланиями !

 .red { background-color: #900; }
.green { background-color: #090; }
.blue { background-color: #00F; }
.purple { background-color: #63C; }
.grey { background-color: #666; }

.container {
    background-color: #FFF;
    width: 50%;
    height: 70%;
    min-height: 400px;
    margin: auto; 
    border: 2px solid black;
}

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

.item {
    width: 45%;
    margin-bottom: 5%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 0;
}

.item:last-child{
    width: 100%;
} 
 <div class="container">
    <div class="item red"></div>
    <div class="item green"></div>
    <div class="item blue"></div>
    <div class="item purple"></div>
    <div class="item grey"></div>
</div>
Метки: