Original: Flexbox: Aligning with Auto Margins, by Samantha Ming

Align-self controls the alignment of Flex items on the cross axis. But the question arises, “Is there a similar property on the principal axis,” such as “justify self” 🤔 Good question! But the answer is no 😅. But there is one property that already exists to take advantage of, and that is Auto Margin! We can use it to control the horizontal alignment of specified elements.

In fact, you can also use Auto Margin controls to specify how elements are aligned vertically.

Furthermore, if you set margin: Auto (relative to left, right, top, and bottom directions at the same time) in your Flex project, you can even achieve the vertical center effect of your Flex project in the container!

To understand the margin

You might be a little confused by this. The Flex project is pushed to the right after using margin-left: auto; Why the Flex project is pushed to the left when margin-right: auto is used? A little counter-intuitive, don’t worry, I think so 😅

Remember the basic concept of margin? The idea is to add space to the element. For example, margin-left: 50px adds a 50px space to the left of the element, pushing it a little further to the right. Using margin-left: auto, auto calculates the entire available space and places that much space to the left of the element, pushing it all the way to the right.

margin interval performance
margin-left Add spacing on the left Push the element to the right
margin-right Add spacing on the right Push the element to the left
margin-top Add spacing on top Push the element down
margin-bottom Add the interval below Push the element up
margin Add intervals on each face The element is vertically centered

Auto Margin has a higher priority 🏆

If auto Margin is used in the Flex project, it takes precedence over the alignment property Settings elsewhere, which means that the Settings elsewhere are invalid 💪

Why is that?

Note: If the remaining space is allocated to Auto Margin, the alignment property setting on that dimension will not work because Margin has already used up the remaining space (after the Flex project is allocated).

In non-development terms, an auto margin is that stupid friend you invite in good faith to live in your house and then think it’s all his and takes up all the space. You don’t have friends like that? I don’t have 😳 either but I think you get the point 😂

Auto Margin case

Here are some interesting examples of using Auto Margin. Use it to lay out your favorite navigation bar typography is very good 🤩

Which one should I use? 🤔

I guarantee you’re a little giddy about which to use and when to switch to which (it’s a choice, right?) 😅. Here’s how I did it:

  1. The Flexbox attribute is preferred
  2. If that doesn’t work, use Auto Margin

The reason? I find the Flexbox attribute more intuitive and more explicit than “Auto Margin”. For comparison:

.child {
  align-self: flex-end;
}
Copy the code

vs

.child {
  margin-top: auto;
}
Copy the code

Even if you didn’t learn anything about Flexbox. Looking at the code literally, we can infer that the child is aligned to the end. If you look at margin-top: Auto, you might get a little dizzy about what kind of layout it’s trying to achieve. Of course, this is just my suggestion. You can make the right choice for you and your team 😊

resources

  • W3C Flexbox Spec: Aligning with auto margins
  • Hackernoon: Flexbox’s Best-Kept Secret
  • CSS Tricks: The peculiar magic of flexbox and auto margins
  • Stack Overflow: Why are there no “justify-items” and “justify-self” properties?
  • Stack Overflow: Can’t scroll to top of flex item that is overflowing container

(after)