我有這個 HTML。
<div class='parent'>
<div>I should be at top right</div>
<div>I should be at top left</div>
<div>I should be at bottom right</div>
</div>
我想達到這種狀態：
這是我當前使用絕對定位的 CSS
<style>
.parent {
position: relative;
width: 100%;
height: 90vh;
}
.parent :first-child {
position: absolute;
top: 0;
right: 0;
}
.parent :nth-child(2) {
position: absolute;
top: 0;
left: 0;
}
.parent :last-child {
position: absolute;
bottom: 0;
right: 0;
}
</style>
但是，有人告訴我根本不使用絕對定位（并且只使用 flexbox）是可能的。
知道我如何實作這一目標嗎？謝謝你。
uj5u.com熱心網友回復：
只需使用flex-wrap: flex;和調整子元素的寬度。在你的情況下也是flex-direction: row-reverse;有幫助的。由于缺少研究努力，沒有添加進一步的解釋。
.parent {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.parent > div {
box-sizing: border-box;
width: 50%;
}
/* for styling purpose only */
.parent > div {
border: 1px solid red;
}<div class='parent'>
<div>I should be at top right</div>
<div>I should be at top left</div>
<div>I should be at bottom right</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/317759.html