フレキシボックス：フレックス項目は別に

Question

こんにちは、私は無駄にこの設計を実現しようとしました。 2番目の項目について：align-self: stretchは機能せず、flex-basisは主軸にのみ適用されます。何か案は？

Answer 1

これはあなたができることです。しかし、あなたのコードで、それは良いはず、あなたに

.container{ 
 
    width : 100vw; 
 
    height : 100vh; 
 
    display:flex; 
 
} 
 
.sub-container1{ 
 
    flex : 1; 
 
    display:flex; 
 
    flex-direction : column; 
 
    background-color : #245878; 
 
} 
 
.item1{ 
 
    flex:1; 
 
    background-color : #214585; 
 
    margin : 5%; 
 
    
 
} 
 
.item2{ 
 
    flex:1; 
 
    background-color : #548789; 
 
    margin : 5%; 
 
} 
 
.sub-container2{ 
 
    flex:1; 
 
    display:flex; 
 
    background-color : #451589; 
 
} 
 
.item3{ 
 
    flex:1; 
 
    background-color : #236589; 
 
    margin : 5%; 
 
}

<div class=container> 
 
    <div class="sub-container1"> 
 
    <div class="item1"></div> 
 
    <div class="item2"></div> 
 
    </div> 
 
    <div class="sub-container2"> 
 
    <div class="item3"></div> 
 
    </div> 
 
</div>