Question

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

在上面的例子中，我想项目1，和，第2项和3使用CSS3 Flexbox的页的右侧。

在此先感谢

Answer 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%; 
}