防止断行设置为列

Question

HTML：

<div class="flex"> 
    <span>One</span> 
    <span>two</span> 
    <span>three</span> 
    <span class="four">four</span> 
    <span>five</span> 
</div> 

CSS：

.flex { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
} 
span { 
    background: #999; 
    margin-top:10px; 
} 
.four { 
    background: #FFFF00; 
} 

基本上标题说了 - 我怎么联该.four和.fivespans在一个线？它甚至有可能吗？有什么想法吗？

https://jsfiddle.net/erghcuhw/

Answer 1

你将不得不使用flex-direction: row，然后对除第4和第5的所有跨度设置flex-wrap: wrap关于Flex容器和flex: 0 0 100%。

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
span { 
 
    background: #999; 
 
    margin-top:10px; 
 
    flex: 0 0 100%; 
 
} 
 
span:nth-child(4), 
 
span:nth-child(5) { 
 
    flex: 0 0 50%; 
 
} 
 
.four { 
 
    background: #FFFF00; 
 
}

<div class="flex"> 
 
    <span>One</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    <span class="four">four</span> 
 
    <span>five</span> 
 
</div>

Answer 2

我给它一个尝试

.flexC { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.flexR { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.flexR span { 
 
    width: 50%; 
 
} 
 

 
span { 
 
    background: #999; 
 
    margin-top: 10px; 
 
} 
 

 
.four { 
 
    background: #FFFF00; 
 
}

<div class="flexs"> 
 
    <div class="flexC"> 
 
    <span>One</span> 
 
    <span>two</span> 
 
    <span>three</span> 
 
    </div> 
 
    <div class="flexR"> 
 
    <span class="four">four</span> 
 
    <span>five</span> 
 
    </div> 
 
</div>