HTML CSS examples for CSS Layout:Flex Column
Create one column layout with flex
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html {<!--from w w w . ja v a 2 s . co m--> box-sizing:border-box; } *, *:before, *:after { box-sizing:inherit; } body { margin:0; } .container { display:flex; border:11px solid Chartreuse; flex-direction:column; } .box { color:yellow; font-size:100px; text-shadow:5px 5px 0 blue; padding:11px; flex-basis:100vh; } .box1 { background:pink; } .box2 { background:WhiteSmoke; } .box3 { background:OrangeRed; } .box4 { background:grey; } .box5 { background:BlueViolet; } .box6 { background:Chartreuse; } .box7 { background:yellow; } .box8 { background:blue; } .box9 { background:pink; } .box10 { background:WhiteSmoke; } </style> </head> <body> <div class="container"> <div class="box box1"> 1 </div> <div class="box box2"> 2 </div> <div class="box box3"> 3 </div> <div class="box box4"> 4 </div> <div class="box box5"> 5 </div> <div class="box box6"> 6 </div> <div class="box box7"> 7 </div> <div class="box box8"> 8 </div> <div class="box box9"> 9 </div> <div class="box box10"> 10 </div> </div> </body> </html>