Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Flexbox Example</title>
- <style>
- .flexbox {
- margin: 100px auto 0 auto; /* basic margins */
- min-height: 400px; /* minimum height of 500px, as long as the things inside dont grow beyond that */
- height: auto; /* if div's inside are larger than 500px, this should 'auto'matically grow */
- width: 80%; /* 80% of page next container up (the body, whole page) */
- background-color: grey;
- border-radius: 5px;
- display: flex; /* define this as a flexbox */
- flex-flow: row nowrap; /* display children as a row, don't wrap inner boxes if screen size gets small*/
- justify-content: space-around; /* make sure space around is the same no matter what screen size is */
- align-items: center; /* center vertically */
- }
- /* basic styles */
- /* target any element with "flexbox-row" class inside an element with "flexbox" */
- .flexbox .flexbox-row {
- background-color: black;
- color: white;
- font-size: 30px;
- padding: 30px;
- border-radius: 5px;
- }
- </style>
- </head>
- <body>
- <div class="flexbox">
- <div class="flexbox-row">
- <p>Text 1</p>
- </div>
- <div class="flexbox-row">
- <p>Text 2</p>
- </div>
- <div class="flexbox-row">
- <p>Text 3</p>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement