Align element to right with margin-left: auto

Question

I would like to align an element to the right. I know that I should use float right to align an element to right, but I have a complex project and I need to understand why margin: 0 0 0 auto; align an element to the right in a case and why it does not work in other case.

When the container is a flex container, the margin: 0 0 0 auto; aligns the element to the right as you can see in this example:

div {
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

But when the container is not a flex container, the item stays on the left:

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
}

<div>
  <span>test</span>
</div>

So my questions are:

• Is it possible to align an item with margin to the right without using flex on the container?
• Does the Flex example works as how it should work or is it a bug in flexbox?

Answer 1

1. Auto margins in flexbox overrides default alignment. This article explains.
2. Putting auto margins on an inline element such as a <span> will be ignored. The auto margin works on block elements and it'll be apparent if it's smaller than the element that contains it. If it isn't given any width, then by default a block element is 100%. See Snippet.

SNIPPET

div {
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 auto;
  display: block;
  width: 100px;
  border: 1px dashed red;
}

<div>
  <span>test</span>
</div>

Answer 2

This neither a bug in flex nor anything to do with margin is there not not. You can always any content with a margin, but what happens here is,

In case 1 (with display: flex):

In simple the flex alway expect a filled container, so it will fill the remaining space with margin. Here you have give margin: 0 0 0 auto. So you have mentioned top to be 0, right to be 0, bottom to be 0 and left to be auto. Since you specify left to be auto, the flexbox fills the elements left with margin, so the element is appearing to right. But the better way to do this is by giving a specific margin-left instead of auto, and use justify-content property to the container

div {
  justify-content: flex-end;
  display: flex;
  width: 400px;
  background: #eee;
}

span {
  margin: 0 0 0 0; //can be 0 or 10px or any exact value.
}

In case 2: You have'nt mentioned any display type, so by default it will be block, in block it won't expect the container to be filled like in flex. So the auto in the margin: 0 0 0 auto is taken as 0. So the content is placed in left itself. There is no direct way to align in block like justify-content in flex. But can be done with many ways, like using float, setting position to absolute and right to 0.

I personaly like using flex when it comes to play around with alignments.