Box Model + Layout (Flexbox-First)

--- theme: seriph title: "Box Model + Layout (Flexbox-First)" info: "Module F-CSS-002: box model, display values, Flexbox (justify/align/direction/gap), Grid preview" --- # Box Model + Layout ## Flexbox-First --- # CSS Layout Evolution 1. **Tables** (1990s) - do not do this 2. **Floats** (2000s) - hacky, but it worked 3. **Flexbox** (2010s) - one-dimensional layouts 4. **Grid** (2017+) - two-dimensional layouts Today: master **Flexbox** for one-direction layouts. Grid comes later. --- layout: center --- # The Box Model --- # Every Element Is a Box Every HTML element is a rectangular box with four layers: ``` ┌─────────────── margin ───────────────┐ │ ┌─────────── border ──────────────┐ │ │ │ ┌──────── padding ──────────┐ │ │ │ │ │ │ │ │ │ │ │ content │ │ │ │ │ │ │ │ │ │ │ └───────────────────────────┘ │ │ │ └─────────────────────────────────┘ │ └──────────────────────────────────────┘ ``` - **Content**: your text, images, etc. - **Padding**: space inside the border - **Border**: the edge of the box - **Margin**: space outside the border > AI tip: AI-generated CSS almost always includes `box-sizing: border-box`. Now you know why. --- # Box Model in CSS ```css .card { width: 300px; padding: 20px; border: 2px solid #333; margin: 16px; } ``` **What's the total width?** `300 + 20*2 + 2*2 + 16*2 = 376px` That math is annoying. There is a fix. --- # box-sizing: border-box ```css /* Default behavior: padding and border add to width */ .card { box-sizing: content-box; /* default */ width: 300px; padding: 20px; /* actual width = 300 + 20 + 20 = 340px */ } /* Better: padding and border included in width */ .card { box-sizing: border-box; width: 300px; padding: 20px; /* actual width = 300px (padding fits inside) */ } ``` Most developers apply this globally: ```css *, *::before, *::after { box-sizing: border-box; } ``` --- layout: center --- # Display Values --- # Block vs Inline vs Inline-Block ```css /* Takes full width, starts on a new line */ display: block; /* <div>, <p>, <h1> */ /* Flows with text, no width/height control */ display: inline; /* <span>, <a>, <strong> */ /* Flows with text BUT accepts width/height */ display: inline-block; /* useful for buttons in a row */ ``` > AI tip: AI usually generates Flexbox for layouts. The rest of this deck teaches you how to read what it gives you. | | New line? | Width/height? | Example | |---|---|---|---| | `block` | Yes | Yes | `<div>`, `<p>` | | `inline` | No | No | `<span>`, `<a>` | | `inline-block` | No | Yes | styled buttons | --- # From display to Flexbox What about `display: flex`? It makes the element a **block-level flex container**. Its children become flex items that you can align and distribute. ```css .container { display: flex; /* children become flex items */ } ``` This is the display value you'll use most in this course. --- layout: center --- # Flexbox --- # Flexbox Basics ```css .container { display: flex; } ``` This makes all **direct children** flex items that: - Line up in a **row** (by default) - Shrink/grow to fit - Can be easily aligned --- # Flex Direction ```css .container { display: flex; flex-direction: row; /* default: left to right */ flex-direction: row-reverse; /* right to left */ flex-direction: column; /* top to bottom */ flex-direction: column-reverse; } ``` `row` = horizontal. `column` = vertical. That's it. --- # Justify Content (Main Axis) ```css .container { display: flex; justify-content: flex-start; /* default */ justify-content: flex-end; /* pushed to end */ justify-content: center; /* centered */ justify-content: space-between; /* equal space between */ justify-content: space-around; /* equal space around */ justify-content: space-evenly; /* truly equal spacing */ } ``` > Main axis = the direction items flow (horizontal for `row`, vertical for `column`). > AI tip: If AI-generated layout spacing looks wrong, check `justify-content`. Changing it to `space-between` or `center` usually fixes the issue. --- # Align Items (Cross Axis) ```css .container { display: flex; align-items: stretch; /* default: fill height */ align-items: flex-start; /* top */ align-items: flex-end; /* bottom */ align-items: center; /* middle */ } ``` > Cross axis = perpendicular to the main axis. --- # Perfect Centering with Flexbox ```css .container { display: flex; justify-content: center; /* horizontal center */ align-items: center; /* vertical center */ height: 100vh; /* full viewport height */ } ``` This is the easiest way to center anything on a page. --- # Flex Wrap + Gap ```css .container { display: flex; flex-wrap: nowrap; /* default: all on one line */ flex-wrap: wrap; /* wrap to next line when out of space */ gap: 20px; /* space between items */ } ``` `gap` replaces the old margin-based spacing hacks. Use it. > AI tip: If AI generates margins between flex items instead of `gap`, replace them with `gap` on the container. Cleaner and easier to maintain. --- # Flex Item Properties ```css .item { flex: 1; /* items share space equally */ } ``` When all items have `flex: 1`, they share space equally. Other values exist (`flex-grow`, `flex-shrink`, `flex-basis`) but you will not need them yet. If you see `flex: 1 1 250px` in AI output, it means "grow, shrink, starting at 250px." > AI tip: When AI generates `flex: 1` on items, it is making them share the available space. That is the most common pattern. --- # Flexbox Example: Navigation Bar ```html <nav class="navbar"> <a href="/">Logo</a> <ul class="nav-links"> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> ``` ```css .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } .nav-links { display: flex; gap: 1rem; list-style: none; } ``` --- # Flexbox Example: Card Row ```css .card-row { display: flex; flex-wrap: wrap; gap: 20px; } .card { flex: 1 1 250px; /* grow, shrink, start at 250px */ padding: 20px; border: 1px solid #ddd; border-radius: 8px; } ``` Cards grow to fill the row and wrap when space runs out. --- layout: center --- # Preview: CSS Grid --- # Grid in 60 Seconds Grid handles **two-dimensional** layouts (rows and columns at once). ```css .container { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */ gap: 20px; } ``` | Flexbox | Grid | |---------|------| | One direction at a time | Two directions at once | | Nav bars, card rows, centering | Page layouts, dashboards | We'll cover Grid in depth later. For now, Flexbox handles most of what you need. --- # Your Turn Create `flexbox-layout.html` in your course repo. Build a page with: 1. A **navigation bar** using Flexbox (logo on the left, links on the right) 2. A **card row** with at least 3 cards that wrap on smaller screens 3. Use `gap` for spacing (no margin hacks) Test it in DevTools at different viewport widths. --- # Practice Games - [Flexbox Froggy](https://flexboxfroggy.com/) - learn Flexbox by moving frogs - [Flexbox Defense](http://www.flexboxdefense.com/) - tower defense with Flexbox - [Grid Garden](https://cssgridgarden.com/) - preview Grid when you are curious --- # Key Takeaways 1. Every element is a **box**: content + padding + border + margin 2. Use `box-sizing: border-box` so width means total width 3. `block` takes full width; `inline` flows with text; `flex` unlocks layout 4. Flexbox: `justify-content` for main axis, `align-items` for cross axis 5. `gap` for spacing between flex items, no margin hacks 6. Grid is for 2D layouts (we will return to it later) --- # What's Next You can now structure layouts with Flexbox. Next: use these skills in your first **mini project**. --- # References - [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) (CSS-Tricks) - [An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) (Josh Comeau) - [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) (CSS-Tricks, for later) - [MDN: box-sizing](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)