방지 줄 바꿈 열

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