Advertisement
trentjs

Flex Box Page Grid

Aug 10th, 2022
783
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.70 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <link rel="stylesheet" href="Xrhcommonstyles.css">
  5. <style>
  6.     body{
  7.         margin: 0px;
  8.         padding:0px;
  9.         font-family: Arial, Helvetica, sans-serif;
  10.         font-size: 11px;
  11.         background-color: #dedede;
  12.     }
  13.  
  14.     /* ::::::::::: [ FLEX PAGE GRID START ] ::::::::::: */
  15.     /* ::::::::::: [ FLEX PAGE GRID START ] ::::::::::: */
  16.     .flex-page{
  17.         display: flex;
  18.         flex-direction: column;
  19.         min-height: 100vh;
  20.         min-width: 100vw;
  21.     }
  22.  
  23.     .flex-page > div{
  24.         display: flex;
  25.         flex-direction: row;
  26.         flex-wrap: nowrap;
  27.     }
  28.  
  29.     .flex-head{ height: auto;}
  30.     .flex-main {flex: auto;}
  31.     .flex-foot {height: auto;}
  32.  
  33.     .flex-main > div, .flex-head > div, .flex-foot > div{
  34.         width:100%;
  35.     }
  36.  
  37.     /* ::::::::::: [ FLEX PAGE GRID END ] ::::::::::: */
  38.     /* ::::::::::: [ FLEX PAGE GRID END ] ::::::::::: */
  39.  
  40.     /* ::::::::::: [ COMP DESIGN START .... ] ::::::::::: */
  41.      /* ::::::::::: [ COMP DESIGN START .... ] ::::::::::: */
  42.     #flex-row-one{
  43.         height: 72px;
  44.         max-height: 72px;
  45.     }
  46.     .flex-page > div{
  47.         border-top:1px solid #999999;
  48.         border-right: 1px solid #999999;
  49.     }
  50.  
  51.     .flex-main > div, .flex-head > div, .flex-foot > div{border-right: 1px solid #999999;padding:0.3em}
  52.  
  53.     /* ::::::::::: [ ..... COMP DESIGN END ] ::::::::::: */
  54.     /* ::::::::::: [ ..... COMP DESIGN END ] ::::::::::: */
  55.  
  56. </style>
  57. </head>
  58. <body>
  59.         <div class="flex-page">
  60.                 <div class="flex-head">
  61.                     <div>flex&ndash;head 01</div>
  62.                     <div>flex&ndash;head 02</div>
  63.                 </div>
  64.                 <div id='flex-row-one' class="flex-main">flex&ndash;main Row 01 Fixed Height</div>
  65.                 <div class="flex-main">
  66.                     <div>flex&ndash;main Row 02 Content 01</div>
  67.                     <div>flex&ndash;main Row 02 Content 02</div>
  68.                     <div>flex&ndash;main Row 02 Content 03</div>
  69.                 </div>
  70.                 <div class="flex-main">
  71.                     <div>flex&ndash;main Row 03 Content 01</div>
  72.                     <div>flex&ndash;main Row 03 Content 02</div>
  73.                     <div>flex&ndash;main Row 03 Content 03</div>
  74.                     <div>flex&ndash;main Row 03 Content 04</div>
  75.                     <div>flex&ndash;main Row 03 Content 05</div>
  76.                 </div>
  77.                 <div class="flex-foot">
  78.                     <div>Flex Foot 01</div>
  79.                     <div>Flex Foot  02</div>
  80.                     <div>Flex Foot  03</div>
  81.                     <div>Flex Foot  04</div>
  82.                 </div>
  83.         </div>
  84.  
  85. </body>
  86. </html>
  87.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement