Question

我正在尝试使用flexbox来设计我的布局。基本上我的目标是：移动按钮＆＃34;我是一个按钮＆＃34;一直到Flex容器的右端，并将其他两个社交按钮保留在容器的左侧。

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

}

http://regexr.com/3dd0l

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

浮动两个弹性项目，一个向右浮动

1 个答案: