停止弯曲儿童包装

Question

我有一个弹性容器和儿童在包装，我希望他们都保持100％的宽度 - 我将如何做到这一点？

.flexbox { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-shrink: 0; 
 
    display: block; 
 
}

<div class="flexbox"> 
 
    <div class="container">sadasd</div> 
 
    <div class="container">adasdsad</div> 
 
</div>

https://jsfiddle.net/shx2yheg/

Answer 1

你只需要设置flex: 0 0 100%在柔性子元素和flex-wrap初始值是nowrap所以你不必改变这种状况。

.flexbox { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 200px; 
 
    border: 2px solid red; 
 
} 
 

 
.container { 
 
    flex: 0 0 100%; 
 
    border: blue 1px solid; 
 
}

<div class="flexbox"> 
 
    <div class="container">sadasd</div> 
 
    <div class="container">adasdsad</div> 
 
</div>

Answer 2

你能做到这一点通过设置这样

.flexbox { 
    display: flex; 
    align-items: center; 
    flex-flow: column; 
    width:100%; 
    height:100vh; 
} 

.container { 
    display: flex; 
}