柔性中心垂直向右水平移動

我想達到這個目的：.right必須垂直於中心對齊，但必須像下圖一樣放置在.wrap的末端。柔性中心垂直向右水平移動

這裏是我的代碼：

.wrap { 
 
    display: flex; 
 
    box-shadow: 0 0 0 1px black; 
 
    height: 400px; 
 
    align-items: center; 
 
} 
 
.wrap > * { 
 
    box-shadow: 0 0 0 1px black; 
 
    padding: 20px; 
 
} 
 
.right { 
 
    align-self: flex-end; 
 
}

<div class="wrap"> 
 
    <div class="left">1</div> 
 
    <div class="nextToLeft">2</div> 
 
    <div class="right">3</div> 
 
</div>

Codepen

來源

2017-06-04 user7376146

只需加保證金左：自動;

.right { 
    margin-left:auto; 
}

來源

2017-06-04 11:43:41

<html> 
 
<head> 
 

 
<style> 
 

 
.wrap { 
 
display: flex; 
 
box-shadow: 0 0 0 1px black; 
 
height: 400px; 
 
align-items: center; 
 
justify-content: space-between; 
 
} 
 

 
.wrap > * { 
 
box-shadow: 0 0 0 1px black; 
 
padding: 20px; 
 
} 
 

 
.nextToLeft { 
 
margin-right: auto; 
 
} 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div class="wrap"> 
 
<div class="left">1</div> 
 
<div class="nextToLeft">2</div> 
 
<div class="right">3</div> 
 
</div> 
 
</body> 
 

 
</html>

來源

2017-06-04 11:50:00 Raj

柔性中心垂直向右水平移動

回答

相關問題