Floating two flex items left and right right in one row

Question

我想用flexbox来设计我的布局。基本上我的目标是：将按钮“我是一个按钮”移动到弹性容器的右端，并将其他两个社交按钮保留在容器的左侧。

<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> 

这里是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

您可以使用margin-left:auto，然后调整按钮。

.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