Introduction to Flexbox

👀 Flexbox Overview

Flexbox, or the Flexible Box Layout, is a one-dimensional layout method in CSS that allows you to design layouts easily and efficiently. It’s ideal for aligning elements horizontally or vertically and distributing space dynamically inside a container.

Key purpose: Arrange items in a row or column, control their size, spacing, and alignment—even when their size is unknown or dynamic.

📦 The two main components of Flexbox are:

Flex Container: The parent element where display: flex is applied.
Flex Items: The direct children of the flex container that will be laid out using Flexbox rules.

✅ Flexbox advantages:

Cleaner and shorter code
Better responsive behavior
Built-in alignment and spacing tools
No clearfix hacks needed

🔹 Real-world Use Cases

Flexbox is perfect for:

Navigation bars: Easily space and align links or buttons.
Cards and grids: Evenly spaced cards that adapt to different screen sizes.
Form layouts: Aligning labels, inputs, and buttons effortlessly.
Centering: Vertically and horizontally centering elements.
Sidebar layouts: Flexible column and row management without media queries.

🔹 Enabling Flexbox: `display: flex;`

To activate Flexbox, set the parent container’s display property to flex.

🔸 Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Container Anatomy</title>
<style>
  .infographic-flexcontainer {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-flexcontainer[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-inner { padding: 0.5rem; }
  .ha-layout { display: flex; flex-direction: column; gap: 1.5rem; }

  .ha-code-wrap {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
  }
  .ha-filetabs {
    display: flex;
    background: #161616;
    border-bottom: 1px solid #2a2a2a;
  }
  .ha-filetab {
    border: none;
    background: transparent;
    color: #8a8a8a;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
  .ha-filetab:hover { color: #e5e5e5; }
  .ha-filetab.ha-tab-on {
    color: #ffffff;
    border-bottom-color: #5b8def;
    background: #0b0b0b;
  }

  .ha-code {
    padding: 1rem 1.8rem 1rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.85;
    overflow-x: auto;
  }
  .ha-codepane { display: none; }
  .ha-codepane.ha-pane-on { display: block; }
  .ha-line { display: block; white-space: pre; color: #8a8a8a; padding: 0.05rem 0.4rem; }
  .ha-tag { color: #60a5fa; font-weight: 700; }
  .ha-attr { color: #f2b96b; }
  .ha-str { color: #9ece6a; }
  .ha-sel { color: #f472b6; font-weight: 700; }
  .ha-prop { color: #c586c0; }
  .ha-val { color: #ce9178; }
  .ha-flex-hl { color: #ffd166; font-weight: 800; }

  .ha-browser {
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--paper);
  }
  .ha-browser-bar {
    background: var(--paper-alt);
    padding: 0.5rem 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--line);
  }
  .ha-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .ha-tab {
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 0.72rem;
    color: var(--ink-soft);
    padding: 0.25rem 0.6rem;
  }
  .ha-urlrow {
    background: var(--paper-alt);
    padding: 0.35rem 0.7rem 0.6rem;
    font-size: 0.72rem;
    color: var(--ink-soft);
    font-family: "SFMono-Regular", Consolas, monospace;
  }

  .ha-screen {
    background: #ffffff;
    padding: 1.2rem 1.4rem 1.4rem;
  }
  .ha-out-container {
    display: flex;
    background-color: lightgrey;
    padding: 10px;
    border-radius: 6px;
    transition: outline 0.2s ease;
  }
  .ha-out-lit { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ha-out-item {
    background: steelblue;
    color: white;
    margin: 5px;
    padding: 20px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    border-radius: 3px;
  }
</style>
</head>
<body>

<div class="infographic-flexcontainer" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code-wrap">
        <div class="ha-filetabs">
          <button class="ha-filetab ha-tab-on" id="tab-html">index.html</button>
          <button class="ha-filetab" id="tab-css">style.css</button>
        </div>

        <div class="ha-code">
          <div class="ha-codepane ha-pane-on" id="pane-html">
<span class="ha-line">&lt;<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-container"</span>&gt;</span>
<span class="ha-line">  &lt;<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item"</span>&gt;1&lt;/<span class="ha-tag">div</span>&gt;</span>
<span class="ha-line">  &lt;<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item"</span>&gt;2&lt;/<span class="ha-tag">div</span>&gt;</span>
<span class="ha-line">  &lt;<span class="ha-tag">div</span> <span class="ha-attr">class</span>=<span class="ha-str">"flex-item"</span>&gt;3&lt;/<span class="ha-tag">div</span>&gt;</span>
<span class="ha-line">&lt;/<span class="ha-tag">div</span>&gt;</span>
          </div>

          <div class="ha-codepane" id="pane-css">
<span class="ha-line"><span class="ha-sel">.flex-container</span> {</span>
<span class="ha-line ha-clickable ha-active" data-part="rule">  <span class="ha-prop">display</span>: <span class="ha-flex-hl">flex</span>;</span>
<span class="ha-line">  <span class="ha-prop">background-color</span>: <span class="ha-val">lightgrey</span>;</span>
<span class="ha-line">  <span class="ha-prop">padding</span>: <span class="ha-val">10px</span>;</span>
<span class="ha-line">}</span>
<span class="ha-line"><span class="ha-sel">.flex-item</span> {</span>
<span class="ha-line">  <span class="ha-prop">background</span>: <span class="ha-val">steelblue</span>;</span>
<span class="ha-line">  <span class="ha-prop">margin</span>: <span class="ha-val">5px</span>;</span>
<span class="ha-line">  <span class="ha-prop">padding</span>: <span class="ha-val">20px</span>;</span>
<span class="ha-line">}</span>
          </div>
        </div>
      </div>

      <div class="ha-browser">
        <div class="ha-browser-bar">
          <span class="ha-dot"></span><span class="ha-dot"></span><span class="ha-dot"></span>
          <div class="ha-tab">🌐 127.0.0.1:5500/html</div>
        </div>
        <div class="ha-urlrow">127.0.0.1:5500/html</div>
        <div class="ha-screen">
          <div class="ha-out-container ha-out-lit">
            <div class="ha-out-item">1</div>
            <div class="ha-out-item">2</div>
            <div class="ha-out-item">3</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const tabHtml = document.getElementById('tab-html');
  const tabCss = document.getElementById('tab-css');
  const paneHtml = document.getElementById('pane-html');
  const paneCss = document.getElementById('pane-css');

  tabHtml.addEventListener('click', () => {
    tabHtml.classList.add('ha-tab-on');
    tabCss.classList.remove('ha-tab-on');
    paneHtml.classList.add('ha-pane-on');
    paneCss.classList.remove('ha-pane-on');
  });
  tabCss.addEventListener('click', () => {
    tabCss.classList.add('ha-tab-on');
    tabHtml.classList.remove('ha-tab-on');
    paneCss.classList.add('ha-pane-on');
    paneHtml.classList.remove('ha-pane-on');
  });
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

🔸 Output:

The three boxes will align in a row by default.
They will share space based on content size unless customised.

👀 Flexbox Overview

🔹 Real-world Use Cases

🔹 Enabling Flexbox: display: flex;

🔸 Output:

🔹 Enabling Flexbox: `display: flex;`