如果flex方向是行，為什么align-self將我的盒子顯示到底部而不是在flex端？[復制]-有解無憂

這個問題在這里已經有了答案：在 CSS Flexbox 中，為什么沒有“justify-items”和“justify-self”屬性？ (6 個回答) 10 小時前關閉。

#container2 {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#one {
  height: 50%;
  width: 25%;
  background-color: coral;
}

#two {
  height: 50%;
  width: 25%;
  background-color: crimson;
}

#three {
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  align-self: flex-end;
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

在上面的代碼中，我在第三個 div 標簽中使用了 flex 屬性，當我使用 align self flex 結束它對齊到底部時，我想將它移到右下角

uj5u.com熱心網友回復：

將最后一個 flex 專案移動到容器末尾的標準方法是應用margin-left: auto;到它（或margin-top: auto垂直方向的 flex 容器）：

#container2 {
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#one {
  height: 50%;
  width: 25%;
  background-color: coral;
}

#two {
  height: 50%;
  width: 25%;
  background-color: crimson;
}

#three {
  height: 50%;
  width: 25%;
  background-color: rgb(80, 30, 12);
  margin-left: auto;
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

uj5u.com熱心網友回復：

如果您在第三個容器中洗掉 css flex 屬性，align-self: flex-end;那么它將起作用。你不需要。

然后你讓這三個彼此相鄰。要將最后一個塊移動到右邊緣，您可以margin-left: auto;按照@Johannes 的正確建議分配第三個塊。但我只是因為約翰內斯的回答才想到這一點。因此為他 1 ;-)

#container2{
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
#one{
    height:50%;
    width:25%;
    background-color: coral;
}
#two{
    height:50%;
    width:25%;
    background-color:crimson;

}
#three{
    height:50%;
    width:25%;
    background-color: rgb(80, 30, 12);  
    margin-left: auto;  
}

<main>
  <div id="container2">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</main>

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

標籤：html css 弹性盒

上一篇：懸停在圖片上時出現黑線

下一篇：我想在javascript中使用innerHTML但它不起作用