I’m stumped I’m trying to learn flexbox and I cant get align self to work at all… there has to be some thing I’m missing. when i find it I’m going to drown it in my own tears
html code
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="header.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vaugn's emporium ol' stuff</title>
</head>
<body>
<div class="container">
<div class="logo">
<a class="header" </a>
</div>
</div>
</body>
</html>
css code
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
border-style: solid;
color: grey;
display: flex;
width: 100%;
}
.logo{
border-style: solid;
align-self: right;
}
2
Answers
Flexbox contents, by default, are arranged in rows. The horizontal position of the content boxes is controlled by
justify-content
. Their vertical position is controlled by align-items (andalign-self
, if desired). If you specifyflex-direction: column
on the flexbox, then these are reversed, withjustify-content
controlling vertical positioning, andalign-items
/align-self
controlling horizontal positioning.So to get the logo to appear on the right side, you should set
justify-content: end
on your.container
.TLDR:
justify-self: flex-end; margin-left: auto;
Given the default flex orientation, you are looking for the
justify-self
property which is the complementary property ofalign-self
(but affects the other axis).Keep in mind that if the container justify remains to its default value, you will also require a
margin-left
set toauto
on the item that need self justification.I second Brett’s explanation, but wanted to mention this solution that doesn’t touch the container flex orientation.