2つのフレックスアイテムを左に1つ右に1つ並べる

Question

フレックスボックスを使用してレイアウトをデザインしようとしています。基本的に私の目標は、「私はボタンです」フレックスコンテナの右端までボタンを移動し、他の2つのソーシャルボタンをコンテナの左側に保ちます。ここで

<div class="quote-box quote"> 

    <h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2> 
    <p class="quote-writter">Quote writer</p> 

    <div class="buttons"> 
    <span class="my-button"><a href="#" class="get-quote-butt">I am a button</a></span> 
    <a href="#" class="tweet-quote-butt"><i class="fa fa-2x fa-twitter"></i> 
    <a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i> 
    </a> 
    </div> 
</div> 


</div> 

あなたはmargin-left:autoを使用して、あなたのボタンを調整することができCSS

.wrapper { 
max-width:750px; 
margin: 0 auto; 
display:flex; 
align-items:center; 
order:1; 
} 

.quote-box { 
    background:rgba(255,255,255,0.2); 
    margin:20px; 
    padding:20px; 
    border-radius: 4px; 
    text-align: center; 
    flex:1; 
    display:flex; 
    flex-wrap:wrap; 

    } 
    .quote-box .quote-writter{ 
    display: flex; 
    justify-content: flex-end; 
} 
.quote-box .buttons{ 
    display: flex; 
    justify-content: flex-start; 
} 
.quote-box > * { 
flex:1 1 100%; 
} 
.quote-box .my-button{ 
display: flex; 
justify-content: flex-end; 
width: 100vh; 
order:3; 
} 
.quote-box .my-button .get-quote-butt{ 
display: flex; 
flex-basis: 300px; 
align-items: center; 

} 

PLEASE LOOK AT THIS IMAGE

Answer 1

です。

.wrapper { 
 
    max-width: 750px; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    align-items: center; 
 
    order: 1; 
 
} 
 

 
.quote-box { 
 
    background: rgba(255, 255, 255, 0.2); 
 
    margin: 20px; 
 
    padding: 20px; 
 
    border-radius: 4px; 
 
    text-align: center; 
 
    flex: 1; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.quote-box .quote-writter { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
.quote-box .buttons { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.quote-box>* { 
 
    flex: 1 1 100%; 
 
} 
 

 
.quote-box .my-button { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    width: 100vh; 
 
    order: 3; 
 
    margin-left: auto; 
 
} 
 

 
.quote-box .my-button .get-quote-butt { 
 
    display: flex; 
 
    flex-basis: 300px; 
 
    align-items: center; 
 
    background: #f1f1f1; 
 
    justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="quote-box quote"> 
 

 
    <h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2> 
 
    <p class="quote-writter">Quote writer</p> 
 

 
    <div class="buttons"> 
 
    <span class="my-button"><a href="#" class="get-quote-butt">I am a button</a></span> 
 
    <a href="#" class="tweet-quote-butt"><i class="fa fa-2x fa-twitter"></i></a> 
 
    <a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i> 
 
    </a> 
 
    </div> 
 

 
</div>

DEMO HERE