Ken-Falco

flex-example

Oct 18th, 2020
751
19 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <main>
  10.         <div class="container">
  11.             <div class="element main">
  12.                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, accusantium ab?
  13.             </div>
  14.             <div class="subelements">
  15.  
  16.                 <div class="element">
  17.                     <div class="infobox">
  18.                         <span class="title">titolo</span>
  19.                         <span class="subtitle">sottotitolo</span>
  20.                     </div>
  21.                 </div>
  22.  
  23.                 <div class="element">
  24.                     <div class="infobox">
  25.                         <span class="title">titolo</span>
  26.                         <span class="subtitle">sottotitolo</span>
  27.                     </div>
  28.                 </div>
  29.  
  30.                 <div class="element">
  31.                     <div class="infobox">
  32.                         <span class="title">titolo</span>
  33.                         <span class="subtitle">sottotitolo</span>
  34.                     </div>
  35.                 </div>
  36.  
  37.             </div>
  38.         </div>
  39.     </main>
  40. </body>
  41.  
  42. <style>
  43.     *{
  44.         padding: 0;
  45.         margin: 0;
  46.     }
  47.  
  48.     .container {
  49.         margin: 10px;
  50.         display: flex;
  51.         flex-direction: column;
  52.         width: 400px;
  53.     }
  54.  
  55.     .subelements {
  56.         position: relative;
  57.         display: flex;
  58.         margin: auto;
  59.         width: 100%;
  60.         justify-content: space-between;
  61.     }
  62.  
  63.     .element {
  64.         position: relative;
  65.         display: flex;
  66.         flex-direction: column-reverse;
  67.         margin-top: 5px;
  68.         width: 100px;
  69.         height: 100px;
  70.         background-color: aquamarine;
  71.     }
  72.  
  73.     .infobox {
  74.         position: relative;
  75.         display: flex;
  76.         flex-direction: column;
  77.         justify-items: center;
  78.     }
  79.  
  80.     .title {
  81.         text-transform: uppercase;
  82.         margin-left: auto;
  83.         margin-right: auto;
  84.     }
  85.  
  86.     .subtitle {
  87.         margin-left: auto;
  88.         margin-right: auto;
  89.     }
  90.  
  91.     .main {
  92.         position: relative;
  93.         display: block;
  94.         width: 100%;
  95.     }
  96. </style>
  97. </html>
RAW Paste Data