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