Why margin-left auto doesn't work on buttons without flexbox

The reason margin-left: auto works differently with display: flex versus the default display property comes down to how CSS handles margins for different element types and in different layout contexts. Button elements have display: inline by default, and auto margins don’t work on inline elements - they’re automatically converted to 0. When the parent has display: flex, the button effectively becomes a flex item, which follows different margin rules.

Contents

• Understanding Default Button Display Behavior
• Why Auto Margins Work in Flexbox
• Solutions for Non-Flexbox Alignment
• Best Practices and Recommendations

Understanding Default Button Display Behavior

When you don’t explicitly set a display property on the parent div, it defaults to display: block. However, the button element itself defaults to display: inline, which creates a fundamental issue with auto margins.

The key problem is that auto margins don’t work on inline elements. According to CSS specifications, when an element has display: inline, any computed value of auto for margin-left or margin-right becomes a used value of 0 source.

Here’s what happens in your default scenario:

<div class="actions-buttons"> <!-- display: block by default -->
  <button class="button-secondary" type="button">Salvar respostas</button>
  <button class="button-primary" type="submit">Fazer matrícula</button>
</div>

• The parent div is display: block
• Both buttons are display: inline by default
• margin-left: auto on an inline element becomes margin-left: 0
• No centering or right-alignment effect occurs

Why Auto Margins Work in Flexbox

When you set display: flex on the parent container, everything changes:

1. Flex items behave differently: When a parent is a flex container, its children become flex items, which have different layout properties than regular inline or block elements.

2. Flexbox margin rules: In flexbox, auto margins are calculated based on the available space in the flex container, not just the element’s width. The browser distributes any available space according to the auto margins.

3. Auto margin calculation: With margin-left: auto on a flex item, the browser calculates how much space is available to the left of the element and applies that as the margin, effectively pushing the element to the right.

As CSS-Tricks explains, “With margin-left:auto, the auto calculates the entire available space and makes that the amount of space to the left of the element. Which pushes the element all the way to the right.”

This is why your code works when the parent has display: flex - the button becomes a flex item, and the auto margin rule applies differently.

Solutions for Non-Flexbox Alignment

There are several ways to achieve similar right-alignment effects without using flexbox:

1. Change Button Display Property

The most direct solution is to make the button a block-level element:

.button-secondary {
    display: block; /* or inline-block */
    margin-left: auto;
    max-width: 200px; /* or specific width */
}

However, this might not give you the exact layout you want since block elements take up full width by default.

2. Use Float for Right Alignment

.button-secondary {
    float: right;
}

3. Use Text Alignment

For inline elements, you can use text alignment on the parent:

.actions-buttons {
    text-align: right;
}

.button-secondary {
    margin-left: 10px; /* adjust as needed */
}

4. Use Position Absolute

.actions-buttons {
    position: relative;
}

.button-secondary {
    position: absolute;
    right: 0;
}

5. Use Grid Layout

.actions-buttons {
    display: grid;
    grid-template-columns: 1fr auto;
}

.button-secondary {
    grid-column: 2;
}

Important note: For margin auto to work on non-flexbox elements, the element must have a defined width. As one Stack Overflow answer explains, “block elements need a width before auto margins will work” source.

Best Practices and Recommendations

When to Use Flexbox vs Other Methods

• Flexbox: Best for component-level alignment, especially when you have multiple items with varying sizes
• Grid: Best for two-dimensional layouts
• Floats/Position: Best for simple cases or when you need to support very old browsers

Modern Solution with Flexbox

Your current flexbox approach is actually excellent and widely recommended. If you want to maintain the flexbox solution but make it more robust:

.actions-buttons {
    display: flex;
    justify-content: flex-start; /* explicit alignment */
    gap: 1rem; /* for consistent spacing */
}

.button-secondary {
    margin-left: auto;
}

Understanding the CSS Box Model

To really master these concepts, it’s helpful to understand the CSS box model and how different display properties affect it:

• Block elements: Can have margins, padding, and width/height applied
• Inline elements: Can have margins and padding, but not width/height (except line-height)
• Inline-block elements: Combine properties of both - can have width/height and margins

As Mozilla Developer Network explains, margin properties work differently depending on the display value of the element.

Conclusion

1. Auto margins don’t work on inline elements like buttons by default because they’re converted to 0
2. Flexbox changes the rules - when a parent is flex, children become flex items with different margin behavior
3. To achieve similar alignment without flexbox, you can change the button’s display property, use floats, text alignment, or grid
4. Modern CSS recommends flexbox or grid for layout tasks as they’re more flexible and maintainable
5. Always consider the display property when applying margin auto - it’s crucial for understanding why margins behave differently in different contexts

The good news is that modern CSS makes alignment much easier than it used to be. Once you understand these basic principles, you’ll be able to confidently choose the right layout method for any situation.

Sources

1. The peculiar magic of flexbox and auto margins | CSS-Tricks
2. How Auto Margins Work in Flexbox | CSS-Tricks
3. Fixing CSS margin auto not working issues - Weekend Projects
4. margin-left - CSS | MDN
5. html - margin:auto; doesn’t work on inline-block elements - Stack Overflow
6. When will Margin: auto; work and not work? - SitePoint Forums
7. Why does margin:0 auto; not work on this input button? - Stack Overflow