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

我想达到这个目的：.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

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

回答

相关问题