Advertisement
Guest User

Untitled

a guest
Jul 22nd, 2019
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.34 KB | None | 0 0
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement