CSSを使用したフッターDIVのスタッキングCSS

Question

フレックスコンテナ内の特定の積み重ね順序を探しています。かなり基本的なフッタは3つのセクションに分割されているので、左右のDivsは100％の高さと20％の幅を持っています。中間は差を埋めるために曲がるが、中間は半分に分割する必要がある。トップとボトムのDivsはそれぞれ50％の高さにあります。私は、絶対的な、固定された、ectと位置を把握するように見えることができません。または何が一番うまく動くか おかげ

[OK]を申し訳ありませんが、ここでのCSSはフレックスコンテナ内部にある

.footer_left_box { 
    position: absolute; 
    display: inline-block; 
    float:left; 
    left:0; 
    width: 10%; 
    height: 100%; 
    background-color:#C9D329; 
} 
.footer_middle_top_box { 
    position: relative; 
    display: inline-block; 
    width: 80%; 
    height: 50%; 
    background-color:#2BB851; 
} 
.footer_middle_bottom_box { 
    position: relative; 
    display: inline-block; 
    width: 80%; 
    height: 50%; 
    background-color:#3954D4; 
} 
.footer_right_box { 
    position: absolute; 
    right:0; 
    width: 10%; 
    height: 100%; 
    background-color:#E33538; 
} 

は、これは私が

Answer 1

フレキシボックスはそれを行うことができますが、あなたが構造を適応させる必要があるかもしれません必要なものの一例です。

footer { 
 
    height: 150px; 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    flex: 0 0 20%; 
 
} 
 
.left { 
 
    background: rebeccapurple; 
 
} 
 
.right { 
 
    background: #bada55; 
 
} 
 
.middle { 
 
    flex: 1; 
 
    border: 2px solid red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top { 
 
    flex: 0 0 50%; 
 
    background: #c0c0ae; 
 
} 
 
.bottom { 
 
    flex: 0 0 50%; 
 
    background: #c0ffee; 
 
}

<footer> 
 
    <div class="left"></div> 
 
    <div class="middle"> 
 
    <div class="top"></div> 
 
    <div class="bottom"></div> 
 
    </div> 
 
    <div class="right"></div> 
 
</footer>