Jump to content

How come paragraphs don't work in FLEXBOX?

Recommended Posts

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
  • Replies 2
  • Created
  • Last Reply

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 responsehttps://m.me/dejaegherryan

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.