所以我試圖將 div 移到 flexbox 內的右側。
我不想將 justify-content 更改為其他任何內容，但我正在嘗試將中間 div 向右移動。但是，如果我使用邊距并移動它，那么整個父 div 周圍的空間也會受到影響。是否可以將中間div向右移動而不影響整個div的空間？
到目前為止，這種解決方案是可行的——但是這些專案會在較小的螢屏上相互疊加，所以這根本沒有回應：
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}
但它似乎不是很優雅。有沒有辦法只用 flexbox 做到這一點？
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
margin-left: 100px;
margin-right: -100px;
border: 1px solid red;
}<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>uj5u.com熱心網友回復：
CSS 變換可以改變元素的位置，但不會影響周圍的元素。
此代碼段洗掉邊距設定，而是使用transform: translateX(100px).
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
/*margin-left: 100px;
margin-right: -100px;
*/
transform: translateX(100px);
border: 1px solid red;
}<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>uj5u.com熱心網友回復：
我認為您可以在這里使用order屬性
.main {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.item2 {
order: 3;
border: 1px solid red;
}<div class="main">
<div class="item1">
Item 1
</div>
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>uj5u.com熱心網友回復：
您可以通過以下幾種方式做到這一點：
1)
transform: translateX(100px)
2)
position: relative;
left: 100px;
3）如果你想改變彈性專案的順序，使用這個：
.flex-item-2{
order: 1
}
它將第二項移動到第三項。因為默認訂單值：0。
也許還有其他有用的方法可以使用！
uj5u.com熱心網友回復：
.main {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item1 {
border: 1px solid red;
}
.rightSide{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item2 {
border: 1px solid red;
}
<div class="main">
<div class="item1 leftSide">
Item 1
</div>
<div class="rightSide">
<div class="item2">
Item 2
</div>
<div class="item1">
Item 3
</div>
</div>
</div>
uj5u.com熱心網友回復：
.main {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.parent {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.p-1{
flex-grow: 2;
}
.p-2{
flex-grow: 1;
}
.item1 {
border: 1px solid red;
}
.item2 {
border: 1px solid red;
}
.item3 {
border: 1px solid red;
}<div class="main">
<div class="parent p-1">
<div class="item1">
Item 1
</div>
</div>
<div class="parent p-2">
<div class="item2">
Item 2
</div>
<div class="item3">
Item 3
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/525388.html
標籤：htmlcss弹性盒