フレックスセンターを縦横に横に並べる

これを実現したいと思います：.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

フレックスセンターを縦横に横に並べる

答えて

関連する問題