Last active
November 9, 2023 12:36
-
-
Save CodeLeom/9bbf49cf2d5cce767f686efd4fbe9073 to your computer and use it in GitHub Desktop.
flexbox example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FlexBox & Grid</title> | |
| <style> | |
| .container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .item-left { | |
| flex: 45%; | |
| background-color: red; | |
| padding: 1px; | |
| border: 1px solid green; | |
| margin: 1px; | |
| } | |
| .item-right { | |
| flex: 45%; | |
| background-color: black; | |
| color: white; | |
| padding: 1px; | |
| border: 1px solid green; | |
| margin: 1px; | |
| } | |
| @media (max-width: 600px) { | |
| .item-left, .item-right { | |
| flex: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Flexbox and Grid</h1> | |
| <p>Flexbox and grid are the main layout system that create rules for multiple eleements</p> | |
| <h3>Flexbox</h3> | |
| <div class="container"> | |
| <div class="item-left"> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> | |
| </div> | |
| <div class="item-right"> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> | |
| </div> | |
| <div class="item-left"> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> | |
| </div> | |
| <div class="item-right"> | |
| <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment