Html Question posted in
Some basic documentation can be found here.

Html – align self not aligning?

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;
}
Tags:

2

Answers


  1. 0

    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 (and align-self, if desired). If you specify flex-direction: column on the flexbox, then these are reversed, with justify-content controlling vertical positioning, and align-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.

    body {
  margin: 0;
}

.container {
  border-style: solid;
  color: grey;
  display: flex;
  justify-content: end;
}

.logo {
  display: block;
  border-style: solid;
}
    <div class="container">
  <div class="logo">
    <img src="http://picsum.photos/100">
  </div>
</div>
    Login or Signup to reply.
  2. 0

    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 of align-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 to auto 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search