API tools faq
paste
surik00

Items flex

surik00
May 7th, 2018
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.28 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
  6.   <style type="text/css">
  7.     html, body {
  8.       min-height: 100vh;
  9.     }
  10.  
  11.     .page {
  12.       min-height: 100vh;
  13.     }
  14.     .page__wrapper {
  15.       position: relative;
  16.       display: flex;
  17.       flex-direction: column;
  18.       min-height: 100vh;
  19.     }
  20.     .page__section {
  21.       border: 4px double black;
  22.       position: relative;
  23.       display: flex;
  24.       flex-direction: column;
  25.       flex-basis: 0;
  26.       flex-grow: 1;
  27.       height: 100%;
  28.       min-height: 1px;
  29.       width: 100%;
  30.     }
  31.     .page__row {
  32.       flex-basis: 0;
  33.       flex-grow: 1;
  34.       width: calc(100% + 30px);
  35.     }
  36.     .page__col {
  37.       display: flex;
  38.       padding: 1px;
  39.       width: 100%;
  40.       max-width: 20%;
  41.       box-sizing: border-box;
  42.     }
  43.  
  44.     .block--graph {
  45.       width: 100%;
  46.       background: red;
  47.     }
  48.   </style>
  49. </head>
  50. <body class="page">
  51.   <div class="page__wrapper">
  52.     <section class="page__section container-fluid">
  53.       <div class="page__row row">
  54.         <div class="page__col col">
  55.           <div class="block block--graph"></div>
  56.         </div>
  57.         <div class="page__col col">
  58.           <div class="block block--graph"></div>
  59.         </div>
  60.         <div class="page__col col">
  61.           <div class="block block--graph"></div>
  62.         </div>
  63.         <div class="page__col col">
  64.           <div class="block block--graph"></div>
  65.         </div>
  66.         <div class="page__col col">
  67.           <div class="block block--graph"></div>
  68.         </div>
  69.         <div class="page__col col">
  70.           <div class="block block--graph"></div>
  71.         </div>
  72.       </div>
  73.       <div class="page__row row">
  74.         <div class="page__col col">
  75.           <div class="block block--graph"></div>
  76.         </div>
  77.         <div class="page__col col">
  78.           <div class="block block--graph"></div>
  79.         </div>
  80.         <div class="page__col col">
  81.           <div class="block block--graph"></div>
  82.         </div>
  83.         <div class="page__col col">
  84.           <div class="block block--graph"></div>
  85.         </div>
  86.         <div class="page__col col">
  87.           <div class="block block--graph"></div>
  88.         </div>
  89.       </div>
  90.     </section>
  91.     <section class="page__section container-fluid">
  92.       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam quidem consequatur blanditiis minus tempore fuga sed error reprehenderit corrupti nam voluptas ratione corporis sint obcaecati, praesentium nihil et debitis pariatur, a dignissimos. Eius et assumenda magni, nesciunt deserunt a placeat eligendi praesentium. Consequatur, at. Sequi sint excepturi veniam recusandae quia sed cupiditate asperiores iusto, neque quidem repellat praesentium accusantium, eligendi, ab nesciunt veritatis dolorum numquam optio quae odio. Obcaecati doloribus repellendus illo architecto itaque repudiandae inventore aspernatur quasi. Doloribus quidem similique, neque ullam ipsum ex. Eos reiciendis alias voluptates, voluptatibus similique iusto rem doloremque unde architecto accusamus, facere esse eum!</p>
  93.     </section>
  94.     <section class="page__section container-fluid">
  95.       <div class="page__row row">
  96.         <div class="page__col">
  97.           <div class="block block--graph"></div>
  98.         </div>
  99.         <div class="page__col">
  100.           <div class="block block--graph"></div>
  101.         </div>
  102.         <div class="page__col">
  103.           <div class="block block--graph"></div>
  104.         </div>
  105.         <div class="page__col">
  106.           <div class="block block--graph"></div>
  107.         </div>
  108.         <div class="page__col">
  109.           <div class="block block--graph"></div>
  110.         </div>
  111.         <div class="page__col">
  112.           <div class="block block--graph"></div>
  113.         </div>
  114.         <div class="page__col">
  115.           <div class="block block--graph"></div>
  116.         </div>
  117.         <div class="page__col">
  118.           <div class="block block--graph"></div>
  119.         </div>
  120.         <div class="page__col">
  121.           <div class="block block--graph"></div>
  122.         </div>
  123.         <div class="page__col">
  124.           <div class="block block--graph"></div>
  125.         </div>
  126.       </div>
  127.     </section>
  128.   </div>
  129. </body>
  130.  
  131. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!