將第一個flexitem與flexend對齊-有解無憂

我無法觸摸 HTML 檔案

我試圖讓 .grey 專案位于其他 4 個專案的底部。我知道還有另一個與這個問題非常相似的問題，但他們正在與 colums 一起作業，我不是這樣，那里的答案都沒有幫助我。

HTML：

<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>

CSS：

.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%;
}

我需要灰色矩形位于底部

uj5u.com熱心網友回復：

如果你想有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>

uj5u.com熱心網友回復：

您可以添加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.
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326573.html

標籤：html css 弹性盒

上一篇：elasticsearch-head連接不上es，出現503錯誤，不僅僅是跨域問題，還有別的原因

下一篇：從復選框中洗掉是