Author Topic: To people who know their HTML (Read 883 times)

blueblur121 · September 18, 2014, 12:46:05 PM

What does flex do? I'm kind of new to this.

Ad Bot · Advertisement

Doomonkey · September 18, 2014, 12:46:45 PM

Flex has something to do with that center alignment. All I know is that it doesn't work without it.

I feel like there is probably some small error in your code, so just copy this:

Code: [Select]

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="style.css"/>
		<title>Placeholder</title>
	</head>
	<body>
		<div id="main1">
			<p>Test</p>	
		</div>
	</body>
</html>

Code: [Select]

body
{
	background: lightgray;
	font-size: small;
	font-family: verdana, arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px 100px;
	height: 800px;
	display: flex;
	align-items: flex-start;
	flex: 1;
}

#main1
{
	width: 200px;
	align-self: center;
	background-color: white;
	padding: 100px;
	margin: 0px;
}

blueblur121 · September 18, 2014, 12:49:48 PM

It sort of worked but why is it so far down.

EDIT: It's because the body's height is 800. I'll fix that somehow.

Doomonkey · September 18, 2014, 12:50:29 PM

The height of the page is 800px.

Refticus · September 18, 2014, 12:50:55 PM

Quote from: Doomonkey on September 18, 2014, 12:50:29 PM

The height of the page is 800px.

Code: [Select]

height: 800px;

blueblur121 · September 18, 2014, 12:51:33 PM

Yeah. I didn't know that it was centered vertically as well as horizontally. I'll figure out how to do that later.

Thanks for your help.