Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>ThankOST</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="wrapper">
<div class="flex-container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
</div>
</body>
</html>
CSS:
*{
font-family: verdana;
margin: 0;
}
body{
background: #eee;
}
.wrapper{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.flex-container{
display: flex;
background-color: #fff;
flex-wrap: wrap;
/*flex-wrap: wrap-reverse;*/
/*flex-flow: column;*/
/*flex-flow: column-reverse;*/
flex-flow: row; /* column-reverse, row, row-reverse*/
height: 600px;
align-items: center; /*flex-end, flex-start*/ /* CROSS AXIS aligns the items in vertical center*/
/*justify-content: center; !* MAIN AXIS flex-start, flex-end, space-between, space-around*!*/
}
.box{
height: 100px;
/*min-width: 200px;*/
/*flex-basis: 200px;*/
/*flex-grow: 1;*/
flex: 0 0 100px;
/*flex: 1 0 200px;*/
/*1 - flex-grow*/
/*0 - flex-shrink*/
/*200px - flex-basis*/
}
.one{
background: red;
/*flex-grow: 2;*/
/*flex-basis: 100px;*/
}
.two{
background: blue;
/*flex-grow: 3;*/
/*flex-basis: 200px;*/
}
.three{
background: green;
/*flex-grow: 1;*/
/*flex-basis: 300px;*/
}