MGU Computer Science Series — Web Development: HTML, CSS, and JavaScript
Part III: CSS: Style and Layout
Flex Containers · Flex Items · Axes · Alignment · Wrapping
Chapter 15 of 30
15
MGU Computer Science Series  ·  Web Development: HTML, CSS, and JavaScript  ·  Library Textbook Edition

Chapter 15:
Flexbox Layout

A one-dimensional layout system for arranging boxes in flexible rows and columns — the foundation of navigation menus, card rows, and adaptable page sections

■ Part III of VII ■

■ 10 Sections  •  Chapter 15 of 30 ■

Builds on the box model from Chapter 14 — assumes comfort with selectors, the cascade, and basic CSS styling

Chapter 15 — Front Matter

Chapter Introduction and Learning Objectives

Look at almost any modern website and you will find rows of evenly spaced buttons, navigation menus whose items line up perfectly no matter how many there are, and rows of cards that resize themselves to fit the screen. For years, building these simple-looking layouts in CSS required clever workarounds involving floats, inline-block elements, negative margins, and a great deal of patience. None of those techniques were designed for layout — they were repurposed for it, and the repurposing showed.

Flexbox changed that. Flexbox — short for the Flexible Box Layout Module — is a CSS layout system built specifically for arranging boxes along a single line, distributing space between them, and aligning them precisely. This chapter introduces flexbox from the ground up: what a flex container and a flex item are, how the main axis and cross axis organize a flex layout, and how a small set of properties — display: flex, flex-direction, gap, justify-content, align-items, and flex-wrap — give you precise control over rows and columns of content.

Opening Question

Picture a website's main navigation bar: a logo on the left, a handful of links in the middle, and a "Sign In" button on the right, all aligned along the same horizontal line and evenly spaced no matter how wide the browser window is. Now picture a row of three product cards that should sit side by side on a desktop screen but stack neatly on a narrow phone screen, with consistent spacing between them in either case. Both of these everyday patterns are solved by the same small set of CSS tools. By the end of this chapter, you will know exactly what those tools are and how to use them with confidence.

10Sections
11Objectives
13Key Terms
30Total Chapters

Learning Objectives

By the end of this chapter, you should be able to:

  1. 1Explain why flexbox exists and what layout problems it was designed to solve.
  2. 2Distinguish between a flex container and a flex item, and identify which elements in a page become which.
  3. 3Explain the difference between the main axis and the cross axis in a flex layout.
  4. 4Use display: flex to turn an element into a flex container and describe the default behavior this creates.
  5. 5Use flex-direction to control whether flex items are arranged in a row or a column.
  6. 6Use gap to add consistent spacing between flex items without relying on margins.
  7. 7Use justify-content to control how flex items are distributed along the main axis.
  8. 8Use align-items to control how flex items are positioned along the cross axis.
  9. 9Explain flex-wrap and describe what happens when flex items do not fit on a single line.
  10. 10Use flex-grow, flex-shrink, and flex-basis to control how individual items resize.
  11. 11Build a simple navigation bar and a row of cards using flexbox.
Chapter 15 — Contents

Sections at a Glance

Sections 15.1 – 15.3
The Mental Model: Why Flexbox Exists, Containers and Items, and the Two Axes
One-Dimensional Layout · Flex Containers · Flex Items · Main Axis · Cross Axis
Section 15.1

Why Flexbox Exists

Chapter 14 explained the box model: every element on a page is a box with content, padding, borders, and margin. That model explains how a single box takes up space. It does not, by itself, explain how to arrange many boxes together in a row, evenly spaced, with one pushed to the far edge and the others clustered in the middle.

For many years, CSS did not have a layout system built for that purpose. Developers reached for tools that were never designed for layout. The float property was originally meant to let text wrap around an image, not to build multi-column page layouts — yet for over a decade, floats were the standard technique for building columns, and they came with awkward side effects that had to be patched with extra "clearfix" code. The display: inline-block property let boxes sit side by side, but it left unpredictable whitespace gaps between them and offered no real way to distribute extra space or align items vertically.

Flexbox — formally the Flexible Box Layout Module — was designed from scratch to solve exactly this kind of problem: arranging a group of boxes along a single line (a row or a column), distributing any extra space between them, and aligning them against each other cleanly. It does this with a small, consistent set of properties rather than a collection of unrelated workarounds.

A Key Idea: One Dimension at a Time

Flexbox is a one-dimensional layout system. At any given moment, it arranges items along a single line — either a row or a column, but not both at once. Chapter 16 introduces CSS Grid, a two-dimensional layout system that controls rows and columns simultaneously. Many real pages use both: flexbox for smaller, linear arrangements like navigation bars and button groups, and grid for larger page-level layouts. Knowing which tool fits which job is itself a skill, and it begins with understanding what "one-dimensional" really means.

Flexbox shines in situations such as:

  • A navigation bar with a logo, a set of links, and a button that should sit on a single row
  • A row of cards that should sit side by side and share the available space evenly
  • A group of form buttons that should be aligned and evenly spaced
  • Centering a single item — horizontally, vertically, or both — inside its container
  • A sidebar and main content area that should sit next to each other and adjust as the window resizes
Section 15.2

Flex Containers and Flex Items

Flexbox introduces two roles, and every flexbox property belongs to one role or the other. Understanding which role a property belongs to will save you a great deal of confusion.

A flex container is an element with display: flex (or display: inline-flex) applied to it. A flex item is any element that is a direct child of a flex container. Setting display: flex on an element does two things at once: it turns that element into a flex container, and it automatically turns each of its direct children into flex items. You never apply a "flex item" class or property to make something a flex item — it becomes one automatically by virtue of being a direct child of a flex container.

Example 15.2.1
Identifying containers and items
  • HTML<nav class="site-nav"><a>Home</a><a>About</a><a>Contact</a></nav>
  • CSS.site-nav { display: flex; }
  • ResultThe nav element becomes the flex container. Each of the three a elements becomes a flex item, automatically arranged in a row. No property was applied to the links directly — their new behavior comes entirely from being direct children of a flex container.
Home
About
Contact

Three flex items, default row arrangement, no spacing rules applied yet

Common Mistake

Flexbox only affects direct children of the flex container — it does not reach further down the tree. If a link contains a nested span, that span is not a flex item; it is simply content inside a flex item. If you want the contents inside one flex item to also behave as a flex row, you must apply display: flex to that item separately, creating a new, independent flex context one level deeper.

Section 15.3

Main Axis and Cross Axis

Every flex container has two axes, and almost every flexbox property is defined in terms of one of them. Getting comfortable with this idea early will make the rest of the chapter far easier to follow.

The main axis is the direction flex items are laid out along — by default, this is horizontal, left to right. The cross axis is always perpendicular to the main axis — by default, vertical, top to bottom. The main axis is determined entirely by the flex-direction property, covered in Section 15.5. Change flex-direction from row to column, and the main axis rotates from horizontal to vertical — and the cross axis rotates with it, remaining perpendicular.

The Key Insight

justify-content always controls spacing along the main axis. align-items always controls alignment along the cross axis. These two properties never swap roles. What changes is which physical direction — horizontal or vertical — counts as "main" at any given moment, because that depends on flex-direction. Once you can identify the main axis in a given layout, you instantly know which property to reach for.

flex-directionMain AxisCross Axis
row (default)Horizontal, left to rightVertical, top to bottom
row-reverseHorizontal, right to leftVertical, top to bottom
columnVertical, top to bottomHorizontal, left to right
column-reverseVertical, bottom to topHorizontal, left to right
Study Note

Before writing any flexbox code, it helps to ask yourself one question first: "Which direction will my items line up in — a row or a column?" That answer tells you the main axis. Everything else in this chapter follows from that single decision.

Sections 15.4 – 15.6
Turning Flexbox On: Display, Direction, and Spacing
display: flex · flex-direction · gap
Section 15.4

display: flex

Flexbox is switched on with a single declaration: display: flex;. The moment you add this to an element's CSS rule, that element becomes a flex container, and its direct children become flex items, arranged according to flexbox's default behavior.

Example 15.4.1
The smallest possible flex layout
  • CSS.card-row { display: flex; }
  • BeforeWithout flexbox, three div elements inside .card-row would stack vertically, one beneath the next, because div is a block-level element by default.
  • AfterWith display: flex applied to .card-row, the three div elements instead line up side by side in a single horizontal row, each one only as wide as its content requires.

By default, a flex container behaves as follows, unless you change it with other properties covered later in this chapter:

  • Items are arranged in a row, left to right (flex-direction: row)
  • Items do not wrap onto a new line — they shrink or overflow instead (flex-wrap: nowrap)
  • Items are packed toward the start of the main axis, with no extra space distributed (justify-content: flex-start)
  • Items stretch to fill the cross axis unless their content prevents it (align-items: stretch)
Tip: inline-flex

A related value, display: inline-flex, creates a flex container that behaves like an inline element in the surrounding page flow — it only takes up as much width as its contents need, rather than stretching to fill its parent's full width. This is useful for small flex groupings, such as an icon-and-label pairing, that should sit inline with surrounding text. For full-width layout sections such as navigation bars and page rows, display: flex is almost always what you want.

Section 15.5

flex-direction

The flex-direction property, applied to the flex container, determines which way the main axis points — and therefore which way flex items line up. It accepts four values.

ValueBehavior
rowItems are placed left to right in a horizontal row. This is the default.
row-reverseItems are placed right to left — the same row, with order flipped.
columnItems are placed top to bottom in a vertical column.
column-reverseItems are placed bottom to top — the same column, with order flipped.
Example 15.5.1
Switching from a row to a column
  • Row.menu { display: flex; flex-direction: row; } — menu items sit side by side, suitable for a horizontal navigation bar on a wide screen.
  • Column.menu { display: flex; flex-direction: column; } — the very same HTML now stacks its items vertically, suitable for a mobile menu or a sidebar list.
  • Why it mattersBecause flex-direction can be changed inside a media query (Chapter 17), the identical markup can rearrange itself from a horizontal menu on a desktop screen to a vertical stack on a narrow phone screen, with no JavaScript required.
Section 15.6

gap and Spacing

Flex items that sit directly next to each other, with no space between, rarely look right. Before the gap property existed, developers added spacing with margins on individual items — and margins brought a frustrating side effect: the first and last items in a row often ended up with unwanted extra space at the outer edges, requiring extra rules just to remove it.

The gap property, applied to the flex container, adds consistent space between flex items only — never on the outside edges of the row or column. This makes it the simplest and most predictable way to space out flex items.

Example 15.6.1
Spacing a row of cards
  • CSS.card-row { display: flex; gap: 1.5rem; }
  • ResultEvery card sits 1.5rem away from its neighbors. There is no gap before the first card or after the last one — exactly the spacing pattern most layouts need.
Tip: Row and Column Gaps

gap is shorthand for two more specific properties: row-gap (vertical space, used when items wrap onto multiple lines) and column-gap (horizontal space). Writing gap: 1rem 2rem; sets a 1rem row gap and a 2rem column gap. For most simple layouts, the single-value shorthand shown above is all you need.

Sections 15.7 – 15.10
Alignment, Wrapping, and Putting It Together
justify-content · align-items · flex-wrap · flex-grow / shrink / basis · Worked Layouts
Section 15.7

justify-content

The justify-content property, applied to the flex container, controls how flex items are distributed along the main axis. It becomes useful the moment a flex container has more space available than its items need — for example, a navigation bar that is wider than the few links inside it.

ValueBehavior
flex-startItems pack toward the start of the main axis. This is the default.
flex-endItems pack toward the end of the main axis.
centerItems pack together in the center of the main axis.
space-betweenThe first item touches the start, the last item touches the end, and remaining space is divided evenly between the items.
space-aroundEqual space is placed around every item, so edge items get half as much outer space as the space between items.
space-evenlyTruly equal space is placed between every item and at both outer edges.
Example 15.7.1
A navigation bar with a logo on one side and links on the other
  • CSS.site-nav { display: flex; justify-content: space-between; }
  • ResultIf the navigation bar contains exactly two flex items — a logo and a links list — the logo is pushed to the far left, the links are pushed to the far right, and all the remaining space sits between them. This single line of CSS replaces what once required floats on opposite sides plus a clearfix.
Study Note

Remember the rule from Section 15.3: justify-content always acts on the main axis. If flex-direction is column, then justify-content controls vertical distribution, not horizontal — because the main axis has rotated to vertical.

Section 15.8

align-items

The align-items property, applied to the flex container, controls how flex items are positioned along the cross axis — the axis perpendicular to the direction items are laid out in. This is the property most often reached for to solve the classic "how do I center this vertically?" problem that frustrated CSS beginners for years before flexbox existed.

ValueBehavior
stretchItems stretch to fill the cross axis. This is the default.
flex-startItems align to the start edge of the cross axis.
flex-endItems align to the end edge of the cross axis.
centerItems are centered along the cross axis.
baselineItems align so their text baselines line up, useful when items contain text of different sizes.
Example 15.8.1
Vertically centering navigation items
  • ProblemA navigation bar contains a tall logo image and a row of plain text links. Without intervention, the text links sit awkwardly at the top of the bar instead of lining up with the vertical center of the taller logo.
  • CSS.site-nav { display: flex; align-items: center; }
  • ResultEvery item in the navigation bar — regardless of its own height — is centered along the cross axis, so the logo and the text links all line up visually in the middle of the bar.
Combining the Two Properties

Used together, justify-content and align-items can center a single item both horizontally and vertically inside its container — a task that once required hacks involving absolute positioning and negative margins:

.center-box { display: flex; justify-content: center; align-items: center; }

This two-line pattern is one of the most frequently used snippets in modern CSS.

Section 15.9

Wrapping and Flexible Sizing

By default, flex items refuse to wrap onto a new line — if there is not enough room, the items shrink or, in extreme cases, overflow their container. For layouts like card rows, where the number of cards may vary or the screen may be narrow, this default is rarely what you want.

flex-wrap

ValueBehavior
nowrapAll items stay on a single line, shrinking if necessary. This is the default.
wrapItems that do not fit move to a new line below (or beside, in a column layout).
wrap-reverseItems wrap, but additional lines stack in reverse order.
Example 15.9.1
A card row that wraps on narrow screens
  • CSS.card-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  • Wide screenAll cards fit comfortably on one row, side by side.
  • Narrow screenCards that no longer fit automatically drop to a new line beneath the first, maintaining the same gap spacing in both directions, with no JavaScript and no media query required for the wrapping itself.

Flexible Sizing: flex-grow, flex-shrink, and flex-basis

Three properties, applied to individual flex items rather than the container, control how each item resizes relative to its siblings:

Item Property
flex-grow
A number indicating how much an item should grow to fill extra space, relative to its siblings. A value of 0 (the default) means the item will not grow at all; a value of 1 means it will grow to absorb available space.
Item Property
flex-shrink
A number indicating how much an item should shrink when there is not enough space, relative to its siblings. A value of 1 is the default; a value of 0 prevents an item from shrinking at all.
Item Property
flex-basis
The starting size of an item along the main axis, before any growing or shrinking is applied — similar in spirit to width, but specific to flex layout.

These three properties are so often used together that CSS provides a shorthand, flex, that sets all three at once: flex: grow shrink basis;. A very common pattern is flex: 1;, which expands to flex-grow: 1; flex-shrink: 1; flex-basis: 0%; — telling an item to grow and shrink freely, sharing available space equally with any sibling that has the same setting.

Example 15.9.2
Three equal-width cards, regardless of content length
  • CSS.card-row { display: flex; gap: 1.5rem; } .card { flex: 1; }
  • ResultEven if one card contains far more text than the others, all three cards remain exactly equal in width, because each one is set to grow and shrink identically and to ignore its own natural content width as a starting point.
Common Mistake

Mixing up flex container properties with flex item properties is one of the most frequent beginner errors. flex-direction, justify-content, align-items, flex-wrap, and gap belong on the container. flex-grow, flex-shrink, flex-basis, and the flex shorthand belong on the items. Applying a container property to an item, or vice versa, simply has no effect — and silent failures like this can be confusing to debug.

Section 15.10

Building Navigation and Card Layouts with Flexbox

This final section combines everything from the chapter into two patterns you will use constantly in real web projects: a navigation bar and a row of cards.

Worked Example 15.10.1
A complete navigation bar
  • GoalA logo on the left, three links in the middle area, and everything vertically centered and evenly spaced along one row.
  • HTML<header class="site-header"><div class="logo">MGU Learning</div><nav class="site-nav"><a href="#">Home</a><a href="#">Lessons</a><a href="#">Contact</a></nav></header>
  • CSS — outer row.site-header { display: flex; justify-content: space-between; align-items: center; } places the logo at one end and the nav group at the other, centered vertically.
  • CSS — inner row.site-nav { display: flex; gap: 1.5rem; } creates a second, nested flex context that spaces the three links evenly within their own group.
  • Why nesting worksThe site-header and site-nav are two separate flex containers, each controlling its own direct children. This is exactly the "direct children only" rule from Section 15.2 working in your favor.
Worked Example 15.10.2
A responsive row of cards
  • GoalThree cards that sit side by side with equal width on a wide screen, wrap onto new lines on a narrow screen, and always keep consistent spacing.
  • HTML<div class="card-row"><div class="card">...</div><div class="card">...</div><div class="card">...</div></div>
  • CSS — container.card-row { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  • CSS — items.card { flex: 1 1 240px; } tells each card to grow, shrink, and start from a base width of 240px — wide enough to read comfortably, but flexible enough to share space evenly or wrap when the screen narrows.
  • ResultOn a wide screen, three cards share the row equally. As the window narrows, cards wrap onto a second line once they would otherwise shrink below their 240px basis — all without a single media query.
Looking Ahead

This chapter focused on flexbox's one-dimensional model: a single row or column at a time. Chapter 16 introduces CSS Grid, which controls rows and columns together — the right tool when a layout needs true two-dimensional structure, such as an entire page template with a header, sidebar, main content area, and footer.

Chapter 15 — Back Matter

Chapter Summary

Key Terms

flexbox
A CSS layout system, formally the Flexible Box Layout Module, designed for arranging boxes along a single line and distributing space between them.
flex container
An element with display: flex or display: inline-flex applied to it, which arranges its direct children using flexbox rules.
flex item
A direct child of a flex container, automatically positioned according to the container's flexbox properties.
main axis
The direction flex items are arranged along, determined by flex-direction. justify-content operates on this axis.
cross axis
The axis perpendicular to the main axis. align-items operates on this axis.
flex-direction
A container property that sets the main axis: row, row-reverse, column, or column-reverse.
gap
A container property that adds consistent space between flex items, without adding space at the outer edges.
justify-content
A container property that distributes flex items along the main axis.
align-items
A container property that positions flex items along the cross axis.
flex-wrap
A container property that determines whether flex items wrap onto new lines when they do not fit on one.
flex-grow
An item property indicating how much an item should expand to fill extra space relative to its siblings.
flex-shrink
An item property indicating how much an item should shrink when space is limited relative to its siblings.
flex-basis
An item property setting the starting size of an item along the main axis, before growing or shrinking is applied.

Concept Check

Answer these questions before beginning the full review questions. They check basic understanding, not deep analysis.

  1. What single CSS declaration turns an element into a flex container?
  2. What is the difference between a flex container and a flex item?
  3. What is the main axis, and what property controls its direction?
  4. Which property distributes items along the main axis, and which one aligns items along the cross axis?
  5. What does flex-wrap: wrap do that the default behavior does not?
  6. Name one container property and one item property covered in this chapter.
  7. What problem does gap solve that margin-based spacing did not solve cleanly?

Common Misconceptions

Misconception 1
"Flexbox can build any page layout, in any number of dimensions."
Flexbox is a one-dimensional system — it arranges items along a single row or column at a time. It can approximate two-dimensional layouts with wrapping, but true row-and-column control over a whole page is the job of CSS Grid, introduced in Chapter 16. Many real projects use flexbox for smaller components and grid for overall page structure.
Misconception 2
"Setting display: flex on a page section makes every element inside it, at every depth, a flex item."
Only direct children of the flex container become flex items. Grandchildren and deeper descendants are unaffected unless they are themselves made into flex containers with their own display: flex declaration, creating a separate, nested flex context.
Misconception 3
"justify-content and align-items do the same thing, just with different names."
They control two different axes. justify-content always governs the main axis — the direction items are laid out in. align-items always governs the cross axis — the perpendicular direction. Which physical direction is "main" depends on flex-direction, but the role of each property never changes.
Misconception 4
"flex-grow, flex-shrink, and flex-basis belong on the flex container, just like justify-content does."
These three properties — and the flex shorthand that combines them — are applied to individual flex items, not the container. Container properties control the group as a whole; item properties control how each individual item resizes within that group.
Misconception 5
"Flex items will wrap onto a new line automatically if they run out of room."
The default value of flex-wrap is nowrap. Without explicitly setting flex-wrap: wrap, items that do not fit will shrink — sometimes uncomfortably — or overflow their container rather than moving to a new line.
ActivitiesFlexbox Diagram Practice

These activities build intuition for the axis model before you write more complex flexbox code.

  1. Draw the Axes. For each of the four flex-direction values, sketch a simple container with three labeled boxes inside it, and draw an arrow showing the main axis and a second arrow showing the cross axis.
  2. Layout Prediction. Given the CSS .row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } applied to a container with three items of different heights, sketch what the result will look like before checking it in a browser.
  3. Code Reading. Examine a short flexbox stylesheet provided by your instructor or textbook companion site. For each rule, identify whether it applies to the flex container or to a flex item, and explain what visual effect it produces.
  4. Layout Debugging. You are given a card row where one card is unexpectedly twice the width of the others. Inspect the CSS for that card and identify which property — most likely flex-grow or flex-basis — is responsible, then propose a fix.
Mini-ProjectResponsive Card Row

Apply this chapter's properties together in one small, realistic build.

  1. Create an HTML page with a container div holding four div elements, each representing a card with a heading and a short paragraph of text.
  2. Using an external stylesheet, set the container to display: flex, add flex-wrap: wrap, and add a consistent gap between cards.
  3. Give each card a flex shorthand value that lets it grow and shrink with a sensible minimum width, so the cards share the row evenly on a wide screen and wrap onto new lines on a narrow one.
  4. Add a simple navigation bar above the cards using a second flex container, with a logo on one side and links on the other using justify-content: space-between and vertical centering with align-items: center.
  5. Resize your browser window and confirm that the cards reflow correctly and the spacing stays consistent at every width.
ReviewReview Questions

Recall and Vocabulary

  1. What CSS declaration creates a flex container?
  2. Which elements become flex items when a container is set to display: flex?
  3. List the four possible values of flex-direction.
  4. What is the default value of flex-wrap, and what does that default mean for items that do not fit?
  5. Name the three item-level sizing properties introduced in this chapter and the shorthand that combines them.
  6. What is the difference between display: flex and display: inline-flex?

Understanding and Explanation

  1. Explain, in your own words, why flexbox was created when floats and inline-block already existed.
  2. Explain the relationship between flex-direction, the main axis, and the cross axis. Use an example that does not appear in the chapter.
  3. A classmate sets justify-content: center on a flex container with flex-direction: column and expects the items to center horizontally, but instead they center vertically. Explain why this happened.
  4. Explain why gap is generally preferred over applying margins to individual flex items for spacing purposes.
  5. Explain the difference between a flex container property and a flex item property, and give two examples of each.

Application and Analysis

  1. You are building a row of five icons that should be evenly spaced with equal space on both outer edges and between each icon. Which value of justify-content achieves this, and why not one of the other values?
  2. A row of three buttons inside a flex container is overflowing the page on narrow phone screens instead of wrapping. Identify the missing property and write the corrected CSS rule.
  3. Examine this CSS: .row { display: flex; } .item { flex: 1; } applied to three items of very different text lengths. Predict what the rendered widths will look like, and explain why using the concepts from Section 15.9.
  4. A sidebar and a main content area sit side by side using flexbox. The designer wants the sidebar to stay a fixed 240px wide while the main content area expands to fill all remaining space. Write CSS for both elements that achieves this using flex-grow and flex-shrink.

Design and Synthesis

  1. Design a flexbox-based footer with three evenly spaced columns of links. Write the HTML and CSS, and explain each property you chose.
  2. Write a short paragraph, suitable for a beginner who has never used CSS layout tools, explaining the difference between the main axis and the cross axis using a real-world analogy of your own invention.
Chapter 15 Checklist
Use this to confirm your understanding before moving to Chapter 16
Concepts
  • I can explain why flexbox was created and what layout problems it solves.
  • I can identify a flex container and its flex items in a piece of HTML and CSS.
  • I can explain the difference between the main axis and the cross axis.
  • I know which flexbox properties belong on the container and which belong on items.
  • I can explain what happens when flex items do not fit on one line, with and without flex-wrap.
Applications
  • I can use display: flex and flex-direction to set up a basic row or column.
  • I can use gap to space flex items without margin workarounds.
  • I can use justify-content and align-items together to center an item both ways.
  • I can use flex-grow, flex-shrink, and flex-basis (or the flex shorthand) to control item sizing.
  • I can build a simple navigation bar and a responsive row of cards using flexbox.
Study Habits
  • I trace through a flex layout by first identifying the main axis before reaching for any property.
  • I check whether a CSS property I am using belongs to the container or to an item before debugging further.
Preview — Chapter 16
Grid Layout

Chapter 15 gave you full control over one-dimensional layout: a single row or column at a time. Chapter 16 introduces CSS Grid, a two-dimensional layout system that controls rows and columns simultaneously. You will learn grid containers and grid items, how to define tracks with grid-template-columns and grid-template-rows, how fractional units distribute space, and how functions like repeat() and minmax() make grid definitions concise and flexible. You will also learn when a whole-page layout calls for Grid instead of Flexbox — and how the two systems work comfortably side by side in the same project.

MGU Library Connection
  • Web Development: HTML, CSS, and JavaScript — Appendix E: CSS Layout Reference
  • Web Development: HTML, CSS, and JavaScript — Appendix D: CSS Reference
  • Companion resource: Flexbox Guide
  • Companion resource: CSS Box Model Chart (Chapter 14)
  • Next chapter: Chapter 16 — Grid Layout
  • Related course: Computer Science Foundations — background reading on layered design and abstraction