SHARE
TWEET

Untitled

a guest Jul 22nd, 2019 55 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <title>Flexbox Example</title>
  5.   <style>
  6.     .flexbox {
  7.         margin: 100px auto 0 auto; /* basic margins */
  8.         min-height: 400px; /* minimum height of 500px, as long as the things inside dont grow beyond that */
  9.         height: auto; /* if div's inside are larger than 500px, this should 'auto'matically grow */
  10.         width: 80%; /* 80% of page next container up (the body, whole page) */
  11.         background-color: grey;
  12.         border-radius: 5px;
  13.         display: flex; /* define this as a flexbox */
  14.         flex-flow: row nowrap; /* display children as a row, don't wrap inner boxes if screen size gets small*/
  15.         justify-content: space-around; /* make sure space around is the same no matter what screen size is */
  16.         align-items: center; /* center vertically */
  17.     }
  18.  
  19.     /* basic styles */
  20.     /* target any element with "flexbox-row" class inside an element with "flexbox" */
  21.     .flexbox .flexbox-row {
  22.         background-color: black;
  23.         color: white;
  24.         font-size: 30px;
  25.         padding: 30px;
  26.         border-radius: 5px;
  27.     }
  28.   </style>
  29. </head>
  30. <body>
  31.   <div class="flexbox">
  32.     <div class="flexbox-row">
  33.       <p>Text 1</p>
  34.     </div>
  35.     <div class="flexbox-row">
  36.       <p>Text 2</p>
  37.     </div>
  38.     <div class="flexbox-row">
  39.       <p>Text 3</p>
  40.     </div>
  41.   </div>
  42. </body>
  43. </html>
RAW Paste Data
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
 
Top