moringaman
11/3/2017 - 8:18 PM

FlexBox for DKS

titlerow.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./flex.css">
<title>Flexbox Study</title>
</head>
<body>

<div id="section">
    
   <div id="flex-content">

<div id="left">
LEFT

<div id="fixed-box">

<div id="phone1" >phone1</div>
<div id="phone2" >Phone2</div>

</div>

</div>
<div id="right">
RIGHT

Some texr and stuff to to on the right
</div>

</div> 
    
</div>


</body>
</html>
titlerow.css
content_copyfile_download
#section {
    position: absolute;
    top: 200px;
    width: 100%;
}

#flex-content {
display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
   
}

#left {
   border: solid 1px red;
    flex: 1 auto;
    
}

#right {
    border: solid 1px blue;
    flex: 1 auto;

}

#fixed-box{
    
    height: 300px;
    width: 0vw;
    min-width: 400px;
    border: solid 1px green;
    float: right;
}

#phone1{
    position: relative;
   height: 30vw;
    width: 20vw;
    background-color: blue;
    color: white;
    top: 0px;
    right: -20px;
    z-index: 4;
    border: 1px solid: blue;
}

#phone2{
    position: relative;
   height: 27vw;
    width: 18vw;
    background-color: red;
    top: -29vw;
    left: -30px;
    z-index: 2;
}