Flexbox打破自舉反應

Question

我有一行，其中一列可以在高度不同，所以我不知道它會有多高。爲了正確地將相鄰列間隔開，我使用了嵌套的彈性盒。

這在主要斷點上工作正常，但只要我添加彈性框，那麼這會打破響應性，因爲列不再移動到移動設備上。

我應該在這裏做什麼？我應該放棄flexbox嗎？我還能如何實現這個間隔？

.container{ 
 
    margin-top: 60px; 
 
} 
 
.container{ 
 
    border: 1px solid #000; 
 
} 
 
.row{ 
 
    display: flex; 
 
} 
 
.row-center{ 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.outer{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    border: 1px solid #000; 
 
    width: 100%; 
 
} 
 

 
.one, .two, .three{ 
 
    flex: 0 0 40px; 
 
    border: 1px solid #000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div> 
 
    <div class="col-xs-12 col-sm-6 row-center"> 
 
     <div class="outer"> 
 
     <div class="one">some text</div> 
 
     <div class="two">some text</div> 
 
     <div class="three">some text</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

的jsfiddle鏡：https://jsfiddle.net/y68dnzwy/

Answer 1

可能是這樣幫助你：

.container{ 
 
    margin-top: 60px; 
 
} 
 
.container{ 
 
    border: 1px solid #000; 
 
} 
 
.row{ 
 
    display: flex; 
 
} 
 
.row-center{ 
 
    display: flex; 
 
    flex: 1; 
 
} 
 

 
.outer{ 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    border: 1px solid #000; 
 
    width: 100%; 
 
} 
 

 
.one, .two, .three{ 
 
    flex: 0 0 40px; 
 
    border: 1px solid #000; 
 
} 
 
/* Added: */ 
 
@media screen and (min-width:100px) and (max-width: 980px) { 
 
    .row-center { 
 
    flex: auto; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-6"><img src="http://placehold.it/350x500"></div> 
 
    <div class="col-xs-12 col-sm-6 row-center"> 
 
     <div class="outer"> 
 
     <div class="one">some text</div> 
 
     <div class="two">some text</div> 
 
     <div class="three">some text</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Demo