Menu
CoddyTech
Start learning
Learn CSS step by stepOnline Web compiler

CSS Flexbox Interview Questions

Axes, alignment, how flex-grow and flex-shrink share space, and the overflow bug everyone meets.

By Kevin Spektor, Co-founder & CTO

10 questions

  1. What is Flexbox and when do you use it?

    A one-dimensional layout model: display: flex lays a parent's direct children out in a row or column (the main axis) and controls how they share space and align on the cross axis. Use it for one line of items, like a nav bar or toolbar; for rows and columns at once, use Grid. Reference: Flexbox.

  2. What is the difference between justify-content and align-items?

    justify-content distributes items along the main axis; align-items aligns them along the cross axis. In the default row that is horizontal and vertical; flex-direction: column swaps them.

    HTML
    <style>
  .row { display: flex; height: 90px; background: #e5e7eb; margin-bottom: 8px;
         justify-content: space-between; align-items: center; }
  .col { display: flex; flex-direction: column; height: 140px; width: 160px; background: #e5e7eb;
         justify-content: center; align-items: flex-end; }
  .item { background: #2563eb; color: white; padding: 6px 10px; margin: 2px; }
</style>
<div class="row"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
<div class="col"><div class="item">1</div><div class="item">2</div></div>

    There is no justify-self in flexbox. To push one item to the end, give it margin-left: auto.

  3. How do flex-grow, flex-shrink and flex-basis work together?

    flex-basis is the starting size. Leftover free space is shared in proportion to flex-grow; overflow is taken back in proportion to flex-shrink, weighted by each basis.

    HTML
    <style>
  .row { display: flex; width: 500px; background: #e5e7eb; }
  .a { flex: 1 1 100px; background: #93c5fd; }
  .b { flex: 2 1 100px; background: #2563eb; color: white; }
</style>
<div class="row"><div class="a">grow 1</div><div class="b">grow 2</div></div>
<script>
  for (const el of document.querySelectorAll('.row > div')) el.textContent += ': ' + el.offsetWidth + 'px';
</script>

    The bases use 200px, leaving 300px: a gets a third and b two thirds, so they end at 200px and 300px, not 1:2. For true 1:2 use flex: 1 and flex: 2, which set the bases to 0.

  4. What do flex: 1, flex: auto and flex: none mean?

    Shorthands for flex-grow flex-shrink flex-basis:

    • flex: initial (0 1 auto), the default: content size, can shrink, never grows.
    • flex: 1 (1 1 0%): splits space equally, ignoring content.
    • flex: auto (1 1 auto): content size, then shares the rest.
    • flex: none (0 0 auto): rigid, for an icon that must not squash.

    The trap: flex: 1 gives equal widths whatever the text; flex: auto lets longer text take more.

  5. Why does a flex item overflow its container instead of shrinking?

    Flex items default to min-width: auto, so they will not shrink below their content's minimum width: the longest word, an image, a nowrap child. Set min-width: 0 (or overflow: hidden) on the item.

    HTML
    <style>
  .row { display: flex; gap: 8px; width: 260px; border: 1px solid #9ca3af; padding: 6px; margin-bottom: 8px; }
  .avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #2563eb; }
  .main { flex: 1; }
  .fixed .main { min-width: 0; }
  .name { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
<div class="row"><div class="avatar"></div><div class="main"><p class="name">A very long display name that will not fit here</p></div></div>
<div class="row fixed"><div class="avatar"></div><div class="main"><p class="name">A very long display name that will not fit here</p></div></div>

    Only the second row, with min-width: 0 on .main, shows the ellipsis. Grid 1fr tracks have the same issue.

  6. How do flex-wrap, gap and align-content work?

    flex-wrap: wrap moves items to new lines instead of shrinking them; gap spaces items and lines but not the outer edges; align-content spaces the lines, so it does nothing on a single-line nowrap container.

    HTML
    <style>
  .wrap { display: flex; flex-wrap: wrap; gap: 8px; width: 280px; height: 180px;
          align-content: space-between; background: #e5e7eb; padding: 8px; }
  .item { flex: 1 1 60px; background: #2563eb; color: white; padding: 8px; }
</style>
<div class="wrap">
  <div class="item">1</div><div class="item">2</div><div class="item">3</div>
  <div class="item">4</div><div class="item">5</div>
</div>

    Items 4 and 5 stretch across the last line and stop lining up with the row above. For columns, use Grid.

  7. Is it safe to reorder content with order or flex-direction: row-reverse?

    Only for visual tweaks. order, row-reverse and grid placement change where items are drawn, not the DOM, so Tab order and screen readers still follow the HTML and focus jumps around the screen, which can fail WCAG 2.4.3 Focus Order. If the order carries meaning, change the HTML.

  8. What is the difference between display: flex and display: inline-flex?

    Both make a flex container and lay out the children the same way. The difference is the container itself: flex makes a block-level box that takes the full width and starts on a new line, inline-flex an inline-level box as wide as its content that sits inside a line of text.

    HTML
    <style>
  .flex, .inline { gap: 6px; padding: 6px; background: #e5e7eb; }
  .flex { display: flex; }
  .inline { display: inline-flex; }
  b { background: #2563eb; color: white; padding: 4px 8px; font-weight: normal; }
</style>
<div class="flex"><b>flex</b><b>full width</b></div>
<p>Text before <span class="inline"><b>inline-flex</b><b>in the line</b></span> and after.</p>

  9. How do you make equal-height columns in CSS?

    Put them in a flex row: align-items defaults to stretch, so every item grows to the height of the tallest one, with no fixed heights. Grid items in a row do the same.

    HTML
    <style>
  .cols { display: flex; gap: 8px; width: 420px; }
  .cols div { flex: 1; background: #dbeafe; border: 1px solid #2563eb; padding: 8px; }
</style>
<div class="cols">
  <div>Short</div>
  <div>A much longer column of text that wraps onto several lines and sets the height of the row.</div>
  <div>Short</div>
</div>

    It stops working when an item has its own height or the row uses align-items: center.

  10. How do you push a button to the bottom of a card with Flexbox?

    Make the card a flex column and give the button margin-top: auto. An auto margin in a flex container takes all the free space on that side, so the button drops to the bottom however long the text above it is.

    HTML
    <style>
  .cards { display: flex; gap: 8px; }
  .card { display: flex; flex-direction: column; width: 150px; padding: 10px;
          background: #f3f4f6; border-radius: 8px; }
  .card button { margin-top: auto; }
</style>
<div class="cards">
  <div class="card"><p>Short text.</p><button>Buy</button></div>
  <div class="card"><p>A longer description that takes several lines in this card.</p><button>Buy</button></div>
</div>

    The cards stretch to the same height, so the buttons line up. margin-left: auto on the last nav item pushes it right the same way, and auto margins work in Grid too.

Coddy programming languages illustration

Learn to code with Coddy

Get started