EKYM - box-flex

box-flex

by fatihhayri

HTML

<div id="esnekKutuKapsul">
    <div class="esnekKutu" id="esnekKutu1">Esnek Kutu1</div>
    <div class="esnekKutu" id="esnekKutu2">Esnek Kutu2</div>
    <div class="esnekKutu" id="esnekKutu3">Esnek Kutu3</div>
    <div class="esnekKutu" id="esnekKutu4">Esnek Kutu4</div>
</div>

CSS

#esnekKutuKapsul {
     background: gray;
    border: blue;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    width:100%;
}
.esnekKutu {
    background-color:#999999;
    height:150px;
}
#esnekKutu1 {
    background-color:#0CF;  
    border: orange solid 1px;
    box-flex: 2;
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -ms-box-flex: 2;
}
#esnekKutu2 {
    background: lightgray;
    border: red solid 1px;
    box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
}
#esnekKutu3 {
    background-color:#9C3;    
    border: red solid 1px;
    box-flex: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-box-flex: 0;
}
#esnekKutu4 {
    background-color:#FC9;
    border: red solid 1px;
}