Flexbox: Aligning with Auto Margins
Tags: css, codenewbie, beginners, tutorial
Published: 2019-10-21 06:05:54

![Flexbox30 by SamanthaMing.com](https://thepracticaldev.s3.amazonaws.com/i/o6bc2t6t7mr70e08tec0.png)


Note: This is a shortened repost from my Flexbox30 series. It does assume Flexbox knowledge. So if you're new to Flexbox, I recommend checking it out first ([link](https://github.com/samanthaming/Flexbox30)). And yes, it's a FREE course 😄

---

### Horizontal Alignment with Auto Margins

You learned that align-self gives you control of the child item in the cross axis. Your next question might be "is there something similar for the main axis", say a "justify-self" 🤔 Great question! Unfortunately, the answer is NO 😅. But we have an existing CSS property that we can use! And that's auto margins. We can use it to control the horizontal alignment of a specific element.

![Horizontal Alignment with margin-right:auto and margin-left:auto](https://thepracticaldev.s3.amazonaws.com/i/xkhjxzchti27p26bmgut.png)

### Vertical Alignment with Auto Margins

Actually, you can also use auto margins to control the vertical alignment of a specific element.

![Vertical Alignment with margin-top:auto and margin-bottom:auto](https://thepracticaldev.s3.amazonaws.com/i/g2vcrmhxn2gvz1hhna8u.png)

### Centering Alignment with Auto Margins

And if you apply all the margins (left, right, top, bottom) with the shorthand margins. You actually center that particular child in the horizontal and vertical direction!

![Centering Alignment with margin:auto](https://thepracticaldev.s3.amazonaws.com/i/m4cmhw40sgpi55xht4yt.png)

---

## Auto Margins Examples

Here are some examples where auto margins really shine! It's great to layout your navbar in whatever style you prefer 🤩

![Auto Margins Examples](https://thepracticaldev.s3.amazonaws.com/i/7sjvm5egc4i5xeth5d0t.png)

---

## Which should I use 🤔

I bet your head is spinning now as to use which and when to use what (the problem with choices am I right) 😅. Here's how I go about it:

1. Always use **Flexbox** properties
2. If not possible, use **auto margins**

Reasoning? I think Flexbox properties are more intuitive and reads more explicit than "auto margins". Check it:

```css
.child {
  align-self: flex-end;
}
```

**vs**

```css
.child {
  margin-top: auto;
}
```

Even if you don't have any Flexbox knowledge. Just be reading this code, you can conclude that the `child` is aligning to the _end_. However with the `margin-top: auto`, you're kinda spinning your head with what that exactly looks like. Of course, this is just my recommendation. You feel free to do what works for you and your team 😊

---

## Flexbox30 Links

[Flexbox30: Learn Flexbox in 30 days with 30 code tidbits](https://github.com/samanthaming/Flexbox30)
[Flexbox: Aligning with Auto Margins (Full Version)](https://github.com/samanthaming/Flexbox30/blob/master/flexbox-aligning-with-auto-margins/README.md)

---

**Thanks for reading ❤**
Say Hello! [Instagram](https://www.instagram.com/samanthaming/) | [Twitter](https://twitter.com/samantha_ming) | [Facebook](https://www.facebook.com/hisamanthaming) | [Blog](https://www.samanthaming.com/blog) | [SamanthaMing.com](https://www.samanthaming.com/)