abc Posted September 24, 2020 Share Posted September 24, 2020 I have this very basic HTML code with some flex content inside a full-screen div. However when I preview it, none of the paragraphs create a new paragraph. Instead, they all appear on a single line. Did I do something wrong? <!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <style> .main { height: 100vh; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="main"> <p>first line</p> <p>second line</p> <p>third line</p> </div> </body> </html> Link to comment
RyanDejaegher Posted September 24, 2020 Share Posted September 24, 2020 Hey @Aurmont, flexbox by default places all elements in a single row and doesn't wrap to the next line. If you want your paragraphs to appear one after another change your code to this. <style> .main { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; } </style> Philadelphia, PA 👉 Squarespace Tutorials Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan Link to comment
abc Posted September 24, 2020 Author Share Posted September 24, 2020 Thank you for your help. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.