如何使'next'箭头与其所在的红框的最右边缘对齐？

Question

*{
  margin:0;
  padding:0;
}
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  height:100vh;
  width:100%;
}
.title{
  font-size:55px;
  letter-spacing:5px;
  width:100%;
  background:yellow;
  flex-basis:30px;
  flex-grow:2.5;
  
  display:flex;
  align-items:center;
  justify-content:center;
}
.box{
  width:85vw;
  background:green;
  flex-basis:120px;
  flex-grow:4;
  border-radius:10px;
}
.buttons{
  width:100%;
  background:red;
  flex-basis:30px;
  flex-grow:.5;
  font-size:35px;
  width:85vw;
 
  display:flex;
  align-items: center;
  
  }
.button{
  background:blue;
  border-radius:5px;
  padding:1px;
  height:40px;
  width:40px;
  
  display:flex;
  align-items:center;
  justify-content:center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="title">
    <div>
    Random Quote Generator
    </div>
  </div>
  <div class="box">
    This is Where Author and Quote go.
  </div>
  <p class="blank"></p>
  <div class="buttons">
    <a class="button"><i class="fa fa-twitter"></i>       </a>
    <a class='button'><i class="fa fa-tumblr"></i></a>
    <a class='button' id='arrow'><i class="fa fa-chevron-right"></i></a>
  </div>
</div>

Twitter和tumblr按钮可以留在左侧，但箭头位于右侧。我不知道该怎么做。

我在一个类似的项目中看到，作者使用像id="arrow"这样的ID作为包含箭头的标签。并执行 &#arrow{flow：right;}。试过了，但没有用。

Answer 1

在 #arrow 上使用 margin-left: auto 。这将导致左边距占用它与左边距之间的可用空间。

#arrow {
  margin-left: auto;
}
*{
  margin:0;
  padding:0;
}
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  height:100vh;
  width:100%;
}
.title{
  font-size:55px;
  letter-spacing:5px;
  width:100%;
  background:yellow;
  flex-basis:30px;
  flex-grow:2.5;
  
  display:flex;
  align-items:center;
  justify-content:center;
}
.box{
  width:85vw;
  background:green;
  flex-basis:120px;
  flex-grow:4;
  border-radius:10px;
}
.buttons{
  width:100%;
  background:red;
  flex-basis:30px;
  flex-grow:.5;
  font-size:35px;
  width:85vw;
 
  display:flex;
  align-items: center;
  
  }
.button{
  background:blue;
  border-radius:5px;
  padding:1px;
  height:40px;
  width:40px;
  
  display:flex;
  align-items:center;
  justify-content:center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="title">
    <div>
    Random Quote Generator
    </div>
  </div>
  <div class="box">
    This is Where Author and Quote go.
  </div>
  <p class="blank"></p>
  <div class="buttons">
    <a class="button"><i class="fa fa-twitter"></i>       </a>
    <a class='button'><i class="fa fa-tumblr"></i></a>
    <a class='button' id='arrow'><i class="fa fa-chevron-right"></i></a>
  </div>
</div>

Answer 2

*{
  margin:0;
  padding:0;
}
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  height:100vh;
  width:100%;
}
.title{
  font-size:55px;
  letter-spacing:5px;
  width:100%;
  background:yellow;
  flex-basis:30px;
  flex-grow:2.5;
  
  display:flex;
  align-items:center;
  justify-content:center;
}
.box{
  width:85vw;
  background:green;
  flex-basis:120px;
  flex-grow:4;
  border-radius:10px;
}
.buttons{
  width:100%;
  background:red;
  flex-basis:30px;
  flex-grow:.5;
  font-size:35px;
  width:85vw;
 
  display:flex;
  align-items: center;
  
  }
.button{
  background:blue;
  border-radius:5px;
  padding:1px;
  height:40px;
  width:40px;
  
  display:flex;
  align-items:center;
  justify-content:center;
}
/* 
Auto margins on flex items have similar effect like auto margins on 
block elements. Adding a margin-left of auto to arrow will make it flow 
to right. 
*/
#arrow {
    margin-left: auto;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="title">
    <div>
    Random Quote Generator
    </div>
  </div>
  <div class="box">
    This is Where Author and Quote go.
  </div>
  <p class="blank"></p>
  <div class="buttons">
    <a class="button"><i class="fa fa-twitter"></i>       </a>
    <a class='button'><i class="fa fa-tumblr"></i></a>
    <a class='button' id='arrow'><i class="fa fa-chevron-right"></i></a>
  </div>
</div>