停止彎曲兒童包裝

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; 
}