0

I have this very basic HTML code with some centered 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>
Alan
  • 93
  • 7
  • 1
    change flex direction – نور Sep 24 '20 at 18:58
  • 1
    Generally you don't want to give `display: flex` to a container for written content (headings, paragraphs, etc.) But what are you actually trying to achieve here? – Lionel Rowe Sep 24 '20 at 18:59
  • 1
    flex-direction:column; is what you're looking for, add it to the .main – arvie Sep 24 '20 at 19:00
  • @AbdullahAlNoor not sure I understand. Could you be more specific? Which flex-direction should I use? – Alan Sep 24 '20 at 19:01
  • 1
    flex has two direction x axis and y axis.. default x-axis .. – نور Sep 24 '20 at 19:02
  • 1
    default `flex-direction: row;` x-axis.. another `flex-direction: column;` y-axis – نور Sep 24 '20 at 19:03
  • @LionelRowe what I'm actually trying to do is create a full-screen footer at the bottom of my page and insert three lines of text into the very center of the full-screen footer. Some recommended I use flexbox for that. – Alan Sep 24 '20 at 19:07
  • 1
    You can use a container div for the content, then wrap that div in the flex footer. So your structure would be `footer.flex>div>p*3` – Lionel Rowe Sep 24 '20 at 19:14
  • Thank you @LionelRowe. Do you mind showing me the final code? I'm such a noob. – Alan Sep 24 '20 at 19:19
  • 1
    plz check [link](https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_center) – نور Sep 24 '20 at 19:23
  • 1
    Unfortunately I can't write an answer because this has been closed as a duplicate of an unrelated question. But here's a jsbin: https://jsbin.com/xuhayic/edit – Lionel Rowe Sep 24 '20 at 19:24
  • Thank you @AbdullahAlNoor for the code. – Alan Sep 24 '20 at 19:35
  • Thank you @LionelRowe for the code. – Alan Sep 24 '20 at 19:35
  • Thank you everyone for your replies. Appreciate it. – Alan Sep 24 '20 at 19:36

0 Answers0