CSS3 FLEXBOX，左右浮动项[重复]答案

【问题标题】：CSS3 FLEXBOX, left and right floating items [duplicate]CSS3 FLEXBOX，左右浮动项[重复]
【发布时间】：2017-01-24 10:43:01
【问题描述】：

<div class="flex-container">
  <div class="flex-item" style='width:15%'>flex item 1</div>
  <div class="flex-item" style='width:15%'>flex item 2</div>
  <div class="flex-item" style='width:15%'>flex item 3</div> 
</div>

在上面的示例中，我希望 Item1 位于左侧，而 item 2 和 3 位于页面右侧，使用 CSS3 Flexbox。

提前致谢

【问题讨论】：

你目前有什么 CSS？怎么不工作了？
.flex-container{ 显示：-webkit-flex;显示：弯曲； }
@prasadparab css-tricks.com/snippets/css/a-guide-to-flexbox 这可以帮助你。
@Parth 感谢您的链接。 bt 该链接不包含我所需的场景
只需将margin-right: auto 应用于第一项，或将margin-left: auto 应用于第二项。任何一个都可以完成这项工作。请参阅副本中的 #26 和 #31 框。

标签： css flexbox

【解决方案1】：

https://jsfiddle.net/y9o1utqk/

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <span></span>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>

.flex-container{
  display:flex;
  flex-direction:row;
  border:2px blue solid;
}

.flex-container > span{
  flex-grow:1; 
}

.flex-container > .flex-item{
  border:2px red solid;
  flex-grow:0;
  width:15%;
}

或者：

https://jsfiddle.net/y9o1utqk/1/

<div class="flex-container">
  <div class="left">flex item 1</div>
  <div class="right">
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div> 
  </div>
</div>

.flex-item{
  border:4px red solid;
  flex-grow:0;
  width:15%;
}

.flex-container{
  display:flex;
  flex-direction:row;
  border:4px blue solid;
  justify-content:space-between;
}

.flex-container > .left{
  width:15%;
  border:4px red solid;
}

.flex-container > .right{
  display:flex;
  flex-direction:row;
  border:4px lime solid;
  width:30%;
}

.flex-container > .right > div{
  border:4px red solid;
  width:50%;
}

【讨论】：

是的..这是我想要的。但是，你能告诉我为什么你添加了额外的跨度吗？没有跨度可以吗？
这是区分左右两边的地方。我正在发布另一个解决方案。看看