Skip to main content

Wait, My Buttons Are Still Side-by-Side Without Flex? Understanding inline-block vs Flexbox

Β· 13 min read
Mahmut Salman
Mahmut Salman
Software Developer

I removed flex from my button container, expecting them to stack vertically, but they're still sitting side-by-side! 🀨 I thought flex was what made them horizontal. My frontend mentor corrected my misunderstanding: buttons are inline-block by default, which means they naturally sit beside each other. This conversation taught me the crucial difference between "happens to be side-by-side" and "controlled side-by-side layout."

The Buttons That Stayed Side-by-Side​

Me (Backend Dev): I have these two buttons:

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

They're side-by-side as expected. But when I remove flex:

<div class="gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

They're STILL side-by-side! I thought flex was what made them horizontal. Is it because of their default inline thing?

The Misconception Corrected​

Frontend Mentor: Not quite! This is a very common misunderstanding. Let me explain what's really happening:

Default Button Behavior​

By default, <button> elements have:

button {
  display: inline-block;  /* ← The key! */
}

What inline-block means:

  • βœ… Elements CAN sit side by side (like words in a sentence)
  • βœ… They wrap to new lines if there's not enough space
  • βœ… You can set width and height (unlike pure inline)
  • ❌ NO control over spacing between them
  • ❌ NO control over alignment
  • ❌ Layout depends on available space

What You're Actually Seeing​

Without flex (current state):

<div>
  <button>Fill User</button>
  <button>Fill Admin</button>
</div>

Result:

[Fill User] [Fill Admin]  ← Side by side because:
                          - They're inline-block by default
                          - There's enough room in the container
                          - They have default spacing (from HTML whitespace)

Why they're side-by-side:

  • NOT because of flexbox (you removed it!)
  • Because inline-block elements naturally flow horizontally
  • Just like words in a paragraph!

The Real Difference: Control​

Without flex (uncontrolled):

<div>
  <button>Fill User</button>
  <button>Fill Admin</button>
</div>
  • ❌ Unpredictable spacing (depends on HTML whitespace)
  • ❌ No gap control
  • ❌ Buttons wrap if container is narrow
  • ❌ No equal width distribution
  • ❌ Hard to align

With flex (controlled):

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>
  • βœ… Precise spacing (gap-2 = 8px)
  • βœ… Controlled layout direction
  • βœ… Equal width distribution (flex-1)
  • βœ… Easy alignment options
  • βœ… Predictable behavior

The Experiment: Seeing the Difference​

Me: Can you show me experiments to see this clearly?

Frontend Mentor: Absolutely! Let's do some tests:

Experiment 1: Remove flex, Keep gap-2​

<div class="gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

What happens:

[Fill User] [Fill Admin]  ← Side by side, but:
                          - gap-2 does NOTHING (gap only works with flex/grid!)
                          - Spacing is from HTML whitespace
                          - flex-1 does NOTHING (only works in flex containers!)

Key insight: gap-2 and flex-1 are IGNORED without flex!

Experiment 2: Add w-full to Each Button​

<div>
  <button class="w-full">Fill User</button>
  <button class="w-full">Fill Admin</button>
</div>

What happens:

[═════════ Fill User ═════════]  ← Full width
[═════════ Fill Admin ════════]  ← Full width
                                 ← NOW they stack!

Why: Each button takes 100% width, forcing them to separate lines!

Experiment 3: Add Back flex, Keep w-full​

<div class="flex gap-2">
  <button class="w-full">Fill User</button>
  <button class="w-full">Fill Admin</button>
</div>

What happens:

[════ Fill User ════] [8px] [════ Fill Admin ════]
                      ↑ gap-2 spacing
     ↑ Equal width (flex magic!)

Why: Flexbox overrides w-full and distributes available space!

Experiment 4: Use flex-1 (Original Design)​

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

What happens:

[════ Fill User ════] [8px] [════ Fill Admin ════]
                      ↑ gap-2 spacing
     ↑ Each button gets equal flex space (flex-1)

This is the professional approach! ✨

Understanding inline-block Behavior​

Me: So inline-block is why they sit side-by-side naturally?

Frontend Mentor: Exactly! Let me show you how inline-block works:

Inline-Block Flow​

Think of inline-block elements like words in a paragraph:

<div style="width: 300px; border: 1px solid;">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

Result:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ [Button 1] [Button 2]      β”‚  ← Fit on one line
β”‚ [Button 3] [Button 4]      β”‚  ← Wrapped to next line
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Just like text wrapping!

The Whitespace Problem​

HTML whitespace creates spacing:

<!-- Spacing from line breaks and indentation -->
<div>
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Browser sees:

<button>Button 1</button>[space]<button>Button 2</button>
                         ↑ This creates a small gap!

Result:

[Button 1] [Button 2]  ← Small gap from HTML whitespace
          ↑ ~4px gap (browser-dependent)

Remove whitespace:

<div>
  <button>Button 1</button><button>Button 2</button>
</div>

Result:

[Button 1][Button 2]  ← No gap! Buttons touching!

This is why we use flexboxβ€”predictable spacing!

Display Types Comparison​

Me: Can you compare all the display types?

Frontend Mentor: Great question! Here's a comprehensive comparison:

1. display: block (Default for <div>)​

<div>
  <button style="display: block;">Button 1</button>
  <button style="display: block;">Button 2</button>
</div>

Result:

[═══════ Button 1 ═══════]  ← Full width
[═══════ Button 2 ═══════]  ← Full width
                            ← Stacked vertically

Characteristics:

  • Takes full width (100%)
  • Forces new line before and after
  • Can set width and height
  • Respects vertical margins

2. display: inline (Default for <span>, <a>)​

<div>
  <button style="display: inline;">Button 1</button>
  <button style="display: inline;">Button 2</button>
</div>

Result:

[Button 1] [Button 2]  ← Side by side
                       ← Wraps like text

Characteristics:

  • Flows like text
  • ❌ Cannot set width and height
  • ❌ Ignores vertical margins
  • Wraps to new line if needed

3. display: inline-block (Default for <button>)​

<div>
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Result:

[Button 1] [Button 2]  ← Side by side
                       ← Can set width/height

Characteristics:

  • Flows like inline (side by side)
  • βœ… Can set width and height (like block)
  • βœ… Respects all margins
  • Best of both worlds!

4. display: flex (Modern Layout)​

<div style="display: flex; gap: 8px;">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Result:

[Button 1] [8px gap] [Button 2]  ← Controlled side-by-side
                                  ← Precise spacing

Characteristics:

  • Full control over layout
  • Precise gap control
  • Easy alignment
  • Equal width distribution
  • Modern standard!

The Magic of flex-1​

Me: What exactly does flex-1 do?

Frontend Mentor: Great question! flex-1 is incredibly powerful:

Without flex-1​

<div class="flex gap-2">
  <button>Fill User</button>
  <button>Fill Admin</button>
</div>

Result:

[Fill User] [8px] [Fill Admin]           [remaining space]
    ↑ Auto width (content size)

Buttons are only as wide as their content!

With flex-1​

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

Result:

[════════ Fill User ════════] [8px] [════════ Fill Admin ════════]
            ↑ Each button grows to fill available space equally

What flex-1 means:

flex-1 {
  flex-grow: 1;      /* Can grow to fill space */
  flex-shrink: 1;    /* Can shrink if needed */
  flex-basis: 0%;    /* Start from 0, then grow */
}

Effect: All items with flex-1 share available space equally!

Unequal Distribution​

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-2">Fill Admin</button>
</div>

Result:

[══ Fill User ══] [8px] [═════════ Fill Admin ═════════]
      ↑ 1/3 width          ↑ 2/3 width (flex-2 = twice as much)

Real-World Button Group Patterns​

Me: What are common patterns for button groups?

Frontend Mentor: Here are professional button group patterns:

Pattern 1: Equal Width Buttons (Your Case)​

<div class="flex gap-2">
  <button class="flex-1 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">
    Fill User
  </button>
  <button class="flex-1 bg-green-600 text-white py-2 rounded-md hover:bg-green-700">
    Fill Admin
  </button>
</div>

Use for: Form actions, modal buttons, toggle groups

Pattern 2: Auto-Width Buttons​

<div class="flex gap-2">
  <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
    Save
  </button>
  <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
    Cancel
  </button>
</div>

Use for: Action buttons, toolbar buttons

Pattern 3: One Primary, One Secondary​

<div class="flex gap-2">
  <button class="flex-1 px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50">
    Cancel
  </button>
  <button class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
    Confirm
  </button>
</div>

Use for: Confirmation dialogs, important decisions

Pattern 4: Icon Buttons​

<div class="flex gap-2">
  <button class="p-2 border border-gray-300 rounded-md hover:bg-gray-50">
    <svg class="w-5 h-5"><!-- Edit icon --></svg>
  </button>
  <button class="p-2 border border-gray-300 rounded-md hover:bg-gray-50">
    <svg class="w-5 h-5"><!-- Delete icon --></svg>
  </button>
  <button class="p-2 border border-gray-300 rounded-md hover:bg-gray-50">
    <svg class="w-5 h-5"><!-- Share icon --></svg>
  </button>
</div>

Use for: Toolbars, action menus

Pattern 5: Responsive Button Group​

<div class="flex flex-col sm:flex-row gap-2">
  <button class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md">
    Save
  </button>
  <button class="flex-1 px-4 py-2 border border-gray-300 rounded-md">
    Cancel
  </button>
</div>

Result:

Mobile (stacked):
[═════════ Save ═════════]
[═══════ Cancel ═════════]

Desktop (side-by-side):
[════ Save ════] [8px] [════ Cancel ════]

Use for: Mobile-friendly forms

Debugging: How to See What's Happening​

Me: How can I debug layout issues like this?

Frontend Mentor: Great question! Here's how to debug:

Method 1: Browser DevTools Computed Tab​

  1. Right-click button β†’ Inspect
  2. Go to "Computed" tab
  3. Look for display property

You'll see:

display: inline-block  ← Without flex
display: flex          ← Inside flex container (button becomes flex item)

Method 2: Visual Borders​

<!-- Add borders to see layout -->
<div class="border-2 border-red-500 gap-2">
  <button class="border-2 border-blue-500">Fill User</button>
  <button class="border-2 border-green-500">Fill Admin</button>
</div>

You'll see:

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ red border (container)
β”‚ β”Œβ”€β”€ blue border (button 1)
β”‚ β”‚ Fill User
β”‚ └──
β”‚ β”Œβ”€β”€ green border (button 2)
β”‚ β”‚ Fill Admin
β”‚ └──
└───────────────────────────

Without flex: Small gap from whitespace With flex gap-2: Precise 8px gap

Method 3: Add Background Colors​

<div class="bg-gray-200 p-4">
  <button class="bg-blue-200">Fill User</button>
  <button class="bg-green-200">Fill Admin</button>
</div>

Makes spacing issues visible!

Common Mistakes with Button Groups​

Me: What mistakes do people make?

Frontend Mentor: Here are the most common ones:

Mistake 1: Using gap Without flex​

❌ Doesn't work:
<div class="gap-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Why: gap only works with display: flex or display: grid!

βœ… Works:
<div class="flex gap-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Mistake 2: Using flex-1 Without flex Container​

❌ Doesn't work:
<div>
  <button class="flex-1">Button 1</button>
  <button class="flex-1">Button 2</button>
</div>

Why: flex-1 only works inside a flex container!

βœ… Works:
<div class="flex gap-2">
  <button class="flex-1">Button 1</button>
  <button class="flex-1">Button 2</button>
</div>

Mistake 3: Expecting inline-block to Respect gap​

❌ Won't work:
<div class="gap-4">
  <button style="display: inline-block;">Button 1</button>
  <button style="display: inline-block;">Button 2</button>
</div>

Why: inline-block doesn't understand gap!

βœ… Use margins instead:
<div>
  <button class="mr-4">Button 1</button>
  <button>Button 2</button>
</div>

βœ… Or use flex:
<div class="flex gap-4">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Mistake 4: Fighting inline-block Whitespace​

❌ Unpredictable spacing:
<div>
  <button>Button 1</button>
  <button>Button 2</button>
</div>

Problem: HTML whitespace creates small gaps (browser-dependent)

βœ… Use flexbox for predictable spacing:
<div class="flex gap-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

When to Use Each Approach​

Me: So when should I use flex vs just letting buttons be inline-block?

Frontend Mentor: Excellent question! Here's the decision guide:

Use inline-block (No Flexbox) When:​

βœ… Buttons are in flowing text content βœ… You want natural text-like wrapping βœ… Simple single-line layouts βœ… Legacy browser support needed

Example:

<p>
  Click here to
  <button class="px-2 py-1 bg-blue-600 text-white rounded">
    Sign Up
  </button>
  or continue reading.
</p>

Use flex When:​

βœ… Precise spacing needed (gap) βœ… Equal width distribution (flex-1) βœ… Alignment control needed βœ… Modern, predictable layouts βœ… Button groups and toolbars

Example (Your case):

<div class="flex gap-2">
  <button class="flex-1">Fill User</button>
  <button class="flex-1">Fill Admin</button>
</div>

Quick Decision Tree​

Need precise spacing?
β”œβ”€ YES β†’ Use flex with gap
└─ NO β†’ inline-block might be fine

Need equal width buttons?
β”œβ”€ YES β†’ Use flex with flex-1
└─ NO β†’ inline-block might be fine

Need vertical/horizontal alignment control?
β”œβ”€ YES β†’ Use flex with items-center/justify-between
└─ NO β†’ inline-block might be fine

Building modern UI?
└─ YES β†’ Use flex (best practice)

Key Takeaways​

Me: Let me make sure I understand this correctly:

Frontend Mentor: Perfect! Here's the summary:

Why Buttons Stay Side-by-Side Without Flex:​

  1. Buttons are inline-block by default in all browsers
  2. inline-block flows horizontally like words in text
  3. They wrap to new lines if container is too narrow
  4. NOT because of flexbox (you removed it!)

The Difference:​

Without flex (uncontrolled):

  • ❌ Unpredictable spacing (HTML whitespace)
  • ❌ No gap control (gap-2 ignored)
  • ❌ No flex utilities (flex-1 ignored)
  • βœ… Works without modern CSS

With flex (controlled):

  • βœ… Precise spacing (gap-2 = 8px)
  • βœ… Equal width distribution (flex-1)
  • βœ… Easy alignment
  • βœ… Modern, predictable

The Professional Approach:​

<div class="flex gap-2">
  <button class="flex-1 bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">
    Fill User
  </button>
  <button class="flex-1 bg-green-600 text-white py-2 rounded-md hover:bg-green-700">
    Fill Admin
  </button>
</div>

Why this works:

  • flex creates flex container
  • gap-2 adds precise 8px spacing
  • flex-1 makes buttons equal width
  • Predictable, modern layout!

Remember:​

  • inline-block = "happens to be side-by-side" (depends on space)
  • flex = "controlled to be side-by-side" (intentional layout)

Always use flex for button groups in modern applications! 🎯

Me: This makes so much sense! I thought removing flex would break the layout, but now I understand it just removes the control. The buttons were always capable of being side-by-side!

Frontend Mentor: Exactly! The inline-block default lets buttons sit beside each other naturally, but flexbox gives you control. It's the difference between "it works by accident" and "it works by design."

Now you understand when buttons are side-by-side by default vs. when you need flexbox for precise control! πŸš€

Did you have similar misconceptions about flexbox? Share in the comments! πŸ’¬