Created
January 25, 2022 22:08
-
-
Save ilmoralito/4119683d55b9fb1eb47708319d270a39 to your computer and use it in GitHub Desktop.
sample using flex
This file contains 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 http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Document</title> | |
<style> | |
.main { | |
display: flex; | |
} | |
.left, | |
.right { | |
flex: 1; | |
} | |
.left { | |
margin-right: 10px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="main"> | |
<div class="left"> | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi | |
rem mollitia, nemo, similique ipsa unde nesciunt incidunt | |
obcaecati aut officiis tempora? Deleniti ad, magnam iusto quis | |
porro ratione commodi numquam! | |
</div> | |
<div class="right"> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam | |
nulla eaque beatae hic perferendis unde provident deserunt | |
nesciunt velit nemo. Expedita nisi est in labore impedit | |
voluptatum ab doloribus quibusdam. | |
</div> | |
</div> | |
</body> | |
</html> | |
<!-- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment