Justify content: center & align-items: flex-start isn't working?

HTML & CSS
1

Hey friends I’m working on the header of a website and i’m using flexbox to split it into two sections which are outlined in red. The left side area is just for my nav, which I’ve completed. The Right side needs to hold some text. The end result needs to look like this

[Album] imgur.com

My problem pertains to the right side, and aligning the text. The right div is set to flex. So i used justify-content: center which removed the column/stacked structure of the text, so i used flex-direction: column to put it back, but this moved it vertically to the middle and horizontally to the left?? So now justify-content: center isn’t doing anything and align-items: flex-start isn’t moving it back to the top. Any ideas on what’s happening?

2

See if this helps your understanding of flex.

A Complete Guide to Flexbox | CSS-Tricks

Have you searched for examples of flex in the forums?

EDIT: added link to CSS-Tricks (forgot to do so earlier)

1 Like
3

Or maybe it is, but it isn’t behaving as you expect? smile Is there any change if you remove that rule?

Have you read these references?

1 Like
4

Why?

It looks to me as though you just want to horizontally center the text in the right side. text-align:center would do that.

i.e.

.header-info {
	/*display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;*/
	text-align:center;
}

If you were after some vertical alignment as well then we’d need more info as your drawing just looks like its aligned to the top.

Why is your header 100vh tall? What do you want to accomplish with that and what happens if 100vh is not enough height for the text you have (e.g. on small screens)?

You will rarely apply fixed heights to elements that contain fluid content like text. You could use min-height if you di want an initial vieport height but still allow the content to expand or be zoomed by the user without breaking.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.