Advanced Flexbox — Web Development Class 32

Class 032 — Flexbox Advanced

In Class 31, you learned the basic concepts of CSS Flexbox, including:

display: flex
Flex Container
Flex Items
Main Axis
Cross Axis
flex-direction
justify-content
align-items
flex-wrap
gap

Now it is time to learn how individual flex items can grow, shrink, change their base size, change visual order and control their own alignment.

These advanced Flexbox properties are extremely important for creating flexible and responsive website layouts.

In this class, you will learn:

flex-grow
flex-shrink
flex-basis
flex shorthand
align-self
order
align-content
flex: 1
Flexible columns
Responsive card layouts
Sidebar layouts
Practical Flexbox patterns

LEARNING OBJECTIVES

After completing this class, you will be able to:

Understand advanced Flexbox item properties.
Control how flex items grow.
Control how flex items shrink.
Define the initial size of flex items.
Use the flex shorthand property.
Control individual item alignment.
Change the visual order of flex items.
Understand align-content.
Build flexible columns.
Create responsive card layouts.
Create sidebar and content layouts.
Use Flexbox more effectively in real projects.

FLEX CONTAINER VS FLEX ITEM PROPERTIES

Before continuing, remember that Flexbox properties can be divided into two groups.

FLEX CONTAINER PROPERTIES

These are generally applied to the parent:

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

gap

Example:

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}

FLEX ITEM PROPERTIES

These are applied to individual flex items:

flex-grow

flex-shrink

flex-basis

flex

align-self

order

Example:

.item {
flex-grow: 1;
}

FLEX-GROW

flex-grow determines how much a flex item can grow relative to other flex items when positive free space is available.

The default value is:

flex-grow: 0;

This means an item does not automatically grow to consume remaining free space.

Example:

.container {
display: flex;
}

.item {
flex-grow: 1;
}

Now the items can grow and share available free space.

FLEX-GROW EXAMPLE

HTML:

<div class="item">
    One
</div>

<div class="item">
    Two
</div>

<div class="item">
    Three
</div>

CSS:

.container {
display: flex;
}

.item {
flex-grow: 1;

padding: 20px;

border: 1px solid black;

}

All three items have the same grow factor, so available positive free space is distributed proportionally between them.

DIFFERENT FLEX-GROW VALUES

Example:

.item-one {
flex-grow: 1;
}

.item-two {
flex-grow: 2;
}

.item-three {
flex-grow: 1;
}

The grow factors are:

1 : 2 : 1

This means item-two receives twice as much of the available positive free space as each item with a grow factor of 1.

Important:

It does not necessarily mean the final width of item-two will always be exactly twice the final width of item-one.

The base sizes of the items also matter.

FLEX-GROW: 0

Example:

.item {
flex-grow: 0;
}

The item does not claim positive free space through flex-grow.

This is the default behavior.

FLEX-SHRINK

flex-shrink determines how flex items shrink when there is not enough space in the flex container.

Default:

flex-shrink: 1;

Example:

.item {
flex-shrink: 1;
}

The item is allowed to shrink according to the Flexbox sizing algorithm.

FLEX-SHRINK: 0

Example:

.sidebar {
flex-shrink: 0;
}

This prevents the sidebar from shrinking through the flex-shrink mechanism.

This can be useful when an element should maintain its intended width.

Example:

.container {
display: flex;
}

.sidebar {
width: 250px;
flex-shrink: 0;
}

.content {
flex-grow: 1;
}

PRACTICAL SIDEBAR

HTML:

<aside class="sidebar">
    Sidebar
</aside>

<main class="content">
    Main Content
</main>

CSS:

.layout {
display: flex;
}

.sidebar {
width: 250px;

flex-shrink: 0;

padding: 20px;

background-color: #e2e8f0;

}

.content {
flex-grow: 1;

padding: 20px;

}

The sidebar keeps its intended width while the main content uses the remaining available space.

FLEX-BASIS

flex-basis defines the initial main size of a flex item before free space is distributed.

Example:

.item {
flex-basis: 300px;
}

If the flex-direction is row, flex-basis commonly acts as the starting width.

If flex-direction is column, it applies along the vertical main axis.

FLEX-BASIS EXAMPLE

.container {
display: flex;
flex-wrap: wrap;
}

.card {
flex-basis: 300px;
}

Each card starts with a main size based on 300px before Flexbox distributes available space.

FLEX-BASIS VS WIDTH

Example:

.item {
width: 300px;
}

and:

.item {
flex-basis: 300px;
}

can sometimes appear similar in a row Flexbox layout, but they are not the same property.

flex-basis participates directly in Flexbox’s main-size calculation.

For Flexbox layouts, flex-basis is often useful when defining the desired starting size of flex items.

FLEX SHORTHAND

The flex property is shorthand for:

flex-grow
flex-shrink
flex-basis

Syntax:

flex: grow shrink basis;

Example:

.item {
flex: 1 1 300px;
}

This means:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;

COMMON FLEX EXAMPLE

.card {
flex: 1 1 280px;
}

This is very useful for responsive card layouts.

It means:

Grow when extra space is available.

Shrink when necessary.

Start from a flex basis of 280px.

FLEX: 1

A very common declaration is:

.item {
flex: 1;
}

For Flexbox, flex: 1 commonly expands to behavior equivalent to:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

This makes sibling items with the same flex value share available space evenly in many common layouts.

EXAMPLE

.container {
display: flex;
}

.item {
flex: 1;
}

If there are three similar items, they can divide the available main-axis space evenly.

TWO-COLUMN FLEXIBLE LAYOUT

HTML:

<div class="column">
    Left Column
</div>

<div class="column">
    Right Column
</div>

CSS:

.layout {
display: flex;
gap: 20px;
}

.column {
flex: 1;

padding: 30px;

background-color: #f1f5f9;

}

Both columns share the available space.

UNEQUAL COLUMNS

Example:

.main {
flex: 2;
}

.sidebar {
flex: 1;
}

In a simple case where their bases are effectively zero, the main content receives approximately twice the distributed space of the sidebar.

FLEX: NONE

Another useful value is:

flex: none;

This corresponds to:

flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;

Example:

.logo {
flex: none;
}

This can be useful when an item should not grow or shrink.

FLEX: AUTO

Example:

.item {
flex: auto;
}

This corresponds to:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

The item’s automatic base size is considered and it can grow or shrink.

ALIGN-SELF

align-self allows one flex item to override the container’s align-items value.

Example:

.container {
display: flex;
align-items: center;
}

.special {
align-self: flex-start;
}

Most items remain centered along the cross axis, but .special aligns itself toward the cross-start.

COMMON ALIGN-SELF VALUES

auto
stretch
flex-start
flex-end
center
baseline

ALIGN-SELF EXAMPLE

HTML:

<div class="item">
    One
</div>

<div class="item special">
    Two
</div>

<div class="item">
    Three
</div>

CSS:

.container {
display: flex;

align-items: center;

height: 300px;

}

.special {
align-self: flex-end;
}

The special item moves toward the cross-end while the others remain centered.

ORDER

The order property changes the visual order of flex items.

Default:

order: 0;

Example:

.item-one {
order: 2;
}

.item-two {
order: 1;
}

.item-three {
order: 3;
}

The visual order is determined by the order values, with lower values appearing earlier.

NEGATIVE ORDER

order can also use negative values.

Example:

.featured {
order: -1;
}

This can move the item visually before items with the default:

order: 0;

IMPORTANT ACCESSIBILITY NOTE

The order property changes visual order.

It does not normally change the logical DOM order used for reading and keyboard navigation.

Therefore, do not use order to create a visual sequence that conflicts with the meaningful HTML structure.

Write HTML in a logical order first.

ORDER EXAMPLE

HTML:

<div class="item first">
    First
</div>

<div class="item second">
    Second
</div>

<div class="item third">
    Third
</div>

CSS:

.container {
display: flex;
}

.first {
order: 3;
}

.second {
order: 1;
}

.third {
order: 2;
}

Visual order:

Second
Third
First

ALIGN-CONTENT

align-content controls the distribution of multiple flex lines along the cross axis.

Important:

align-content is useful when:

flex-wrap is enabled
Multiple flex lines exist
There is extra cross-axis space in the container

Example:

.container {
display: flex;

flex-wrap: wrap;

align-content: center;

height: 500px;

}

COMMON ALIGN-CONTENT VALUES

normal
flex-start
flex-end
center
space-between
space-around
space-evenly
stretch

ALIGN-CONTENT VS ALIGN-ITEMS

This is very important.

align-items:

Controls how flex items are aligned within their flex line along the cross axis.

align-content:

Controls how multiple flex lines are distributed within the flex container along the cross axis.

Example:

.container {
display: flex;

flex-wrap: wrap;

align-items: center;

align-content: space-between;

height: 500px;

}

If there is only one flex line, align-content will not have the same visible multi-line distribution effect.

ALIGN-CONTENT EXAMPLE

HTML:

<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 class="item">6</div>

CSS:

.container {
display: flex;

flex-wrap: wrap;

align-content: space-between;

width: 500px;
height: 400px;

}

.item {
width: 150px;

padding: 20px;

}

When the items create multiple lines, the lines can be distributed along the cross axis.

RESPONSIVE CARD LAYOUT

HTML:

<article class="card">

    <h2>
        HTML
    </h2>

    <p>
        Learn webpage structure.
    </p>

</article>

<article class="card">

    <h2>
        CSS
    </h2>

    <p>
        Learn modern website design.
    </p>

</article>

<article class="card">

    <h2>
        JavaScript
    </h2>

    <p>
        Learn website interactivity.
    </p>

</article>

CSS:

.cards {
display: flex;

flex-wrap: wrap;

gap: 24px;

}

.card {
flex: 1 1 280px;

padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

}

This is one of the most useful Flexbox card patterns.

HOW THIS CARD PATTERN WORKS

flex: 1 1 280px;

means:

Grow = 1

Shrink = 1

Basis = 280px

The cards can:

Start around 280px
Grow into extra available space
Shrink when necessary
Move to another flex line because the parent uses flex-wrap

HEADER WITH FLEX: 1

HTML:

<div class="logo">
    WEBDEV
</div>

<nav class="nav">

    <a href="#">Home</a>
    <a href="#">Courses</a>
    <a href="#">Contact</a>

</nav>

<div class="actions">

    <button>
        Login
    </button>

</div>

CSS:

.header {
display: flex;

align-items: center;

gap: 30px;

}

.nav {
display: flex;

flex: 1;

justify-content: center;

gap: 20px;

}

The navigation takes flexible available space between the logo and actions.

SIDEBAR + CONTENT LAYOUT

HTML:

<aside class="sidebar">

    <h2>
        Menu
    </h2>

</aside>

<main class="main-content">

    <h1>
        Dashboard
    </h1>

</main>

CSS:

.dashboard {
display: flex;

min-height: 100vh;

}

.sidebar {
flex: 0 0 250px;

padding: 30px;

background-color: #0f172a;

color: white;

}

.main-content {
flex: 1;

padding: 40px;

}

WHAT DOES THIS MEAN?

Sidebar:

flex: 0 0 250px;

means:

Do not grow.

Do not shrink.

Use a 250px flex basis.

Main content:

flex: 1;

uses the remaining available space.

MEDIA QUERY EXAMPLE

Later, responsive design will be covered in detail.

A simple example:

.dashboard {
display: flex;
}

.sidebar {
flex: 0 0 250px;
}

.main-content {
flex: 1;
}

@media (max-width: 768px) {

.dashboard {
    flex-direction: column;
}

.sidebar {
    flex-basis: auto;
}

}

On smaller screens, the layout becomes vertical.

FLEXBOX FORM LAYOUT

HTML:

<input
    type="search"
    placeholder="Search..."
>

<button type="submit">
    Search
</button>

CSS:

.search-form {
display: flex;

gap: 10px;

}

.search-form input {
flex: 1;
}

The input grows to use the remaining available width.

FLEXIBLE BUTTON GROUP

HTML:

<button>
    Save
</button>

<button>
    Preview
</button>

<button>
    Publish
</button>

CSS:

.buttons {
display: flex;

gap: 12px;

}

.buttons button {
flex: 1;
}

The buttons can share the available width.

FLEXBOX PRICING CARDS

HTML:

<div class="pricing-card">

    <h2>
        Basic
    </h2>

    <p>
        $10
    </p>

</div>

<div class="pricing-card featured">

    <h2>
        Professional
    </h2>

    <p>
        $30
    </p>

</div>

<div class="pricing-card">

    <h2>
        Business
    </h2>

    <p>
        $50
    </p>

</div>

CSS:

.pricing {
display: flex;

flex-wrap: wrap;

align-items: stretch;

gap: 24px;

}

.pricing-card {
flex: 1 1 280px;

padding: 30px;

border: 1px solid #dddddd;

}

.featured {
align-self: flex-start;
}

MIN-WIDTH PROBLEM IN FLEXBOX

Sometimes a flex item contains long content and does not shrink as expected.

Example:

.content {
flex: 1;
min-width: 0;
}

Setting:

min-width: 0;

can allow a flex item to shrink below its content’s intrinsic minimum width when appropriate.

Example:

.layout {
display: flex;
}

.sidebar {
flex: 0 0 250px;
}

.content {
flex: 1;
min-width: 0;
}

This is particularly useful when the content contains:

Long text
Tables
Code
Images
Long URLs

FLEXBOX WITH IMAGES

Example:

.card {
display: flex;

gap: 20px;

}

.card-image {
flex: 0 0 150px;
}

.card-content {
flex: 1;
min-width: 0;
}

.card-image img {
display: block;

width: 100%;
height: auto;

}

PRACTICAL ARTICLE CARD

HTML:

<div class="article-image">

    <img
        src="article.jpg"
        alt="Web Development"
    >

</div>

<div class="article-content">

    <h2>
        Learn Professional Web Development
    </h2>

    <p>
        Learn how modern websites are designed and developed.
    </p>

</div>

CSS:

.article-card {
display: flex;

gap: 24px;

padding: 20px;

border: 1px solid #dddddd;

}

.article-image {
flex: 0 0 200px;
}

.article-content {
flex: 1;

min-width: 0;

}

.article-image img {
width: 100%;
}

EQUAL HEIGHT CARDS

Flexbox can help cards in the same flex line stretch to the same cross size.

Example:

.cards {
display: flex;

align-items: stretch;

gap: 20px;

}

.card {
flex: 1;
}

Remember:

align-items: stretch;

is the initial behavior in many Flexbox layouts when items do not have a fixed cross size.

CARD CONTENT ALIGNMENT

You can also make each card a flex container.

Example:

.card {
display: flex;

flex-direction: column;

}

.card .button {
margin-top: auto;
}

This is a very useful real-world technique.

Example:

<h2>
    Web Development
</h2>

<p>
    Learn HTML, CSS and JavaScript.
</p>

<a href="#" class="button">
    Learn More
</a>

CSS:

.card {
display: flex;

flex-direction: column;

min-height: 300px;

}

.card .button {
margin-top: auto;
}

The button is pushed toward the bottom of the card because auto margin absorbs available free space along the main axis.

AUTO MARGIN IN FLEXBOX

Auto margins are powerful in Flexbox.

Example:

.navbar {
display: flex;
}

.login {
margin-left: auto;
}

This pushes the login item toward the end of the row in a left-to-right layout.

Example:

<a href="#">
    Home
</a>

<a href="#">
    Courses
</a>

<a href="#" class="login">
    Login
</a>

CSS:

.navbar {
display: flex;

gap: 20px;

}

.login {
margin-left: auto;
}

PRACTICAL WEBSITE LAYOUT

HTML:

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>
    Advanced Flexbox
</title>

<link
    rel="stylesheet"
    href="style.css"
>

<header class="header">

    <div class="logo">
        WEBDEV
    </div>

    <nav class="nav">

        <a href="#">Home</a>

        <a href="#">Courses</a>

        <a href="#">Blog</a>

        <a href="#">Contact</a>

    </nav>

    <a href="#" class="login">
        Login
    </a>

</header>


<main class="layout">

    <aside class="sidebar">

        <h2>
            Categories
        </h2>

        <p>
            HTML
        </p>

        <p>
            CSS
        </p>

        <p>
            JavaScript
        </p>

    </aside>


    <section class="content">

        <h1>
            Our Courses
        </h1>

        <div class="cards">

            <article class="card">

                <h2>
                    HTML
                </h2>

                <p>
                    Learn website structure.
                </p>

                <a href="#" class="button">
                    Learn More
                </a>

            </article>


            <article class="card">

                <h2>
                    CSS
                </h2>

                <p>
                    Learn modern website styling and layouts.
                </p>

                <a href="#" class="button">
                    Learn More
                </a>

            </article>


            <article class="card">

                <h2>
                    JavaScript
                </h2>

                <p>
                    Learn interactive web development.
                </p>

                <a href="#" class="button">
                    Learn More
                </a>

            </article>

        </div>

    </section>

</main>

CSS:

{
box-sizing: border-box;
}

body {
margin: 0;

font-family:
    Arial,
    sans-serif;

}

.header {
display: flex;

align-items: center;

gap: 30px;

padding: 20px 5%;

background-color: #0f172a;

color: white;

}

.nav {
display: flex;

gap: 20px;

}

.nav a,
.login {
color: white;

text-decoration: none;

}

.login {
margin-left: auto;
}

.layout {
display: flex;

min-height: 80vh;

}

.sidebar {
flex: 0 0 250px;

padding: 30px;

background-color: #e2e8f0;

}

.content {
flex: 1;

min-width: 0;

padding: 40px;

}

.cards {
display: flex;

flex-wrap: wrap;

gap: 24px;

}

.card {
display: flex;

flex: 1 1 280px;

flex-direction: column;

padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

}

.card .button {
margin-top: auto;
}

CODE EXPLANATION

.sidebar {
flex: 0 0 250px;
}

The sidebar:

Does not grow.
Does not shrink.
Starts with a 250px flex basis.

.content {
flex: 1;
}

The content uses the remaining available space.

.content {
min-width: 0;
}

This allows the flexible content area to shrink appropriately when its contents would otherwise force a larger intrinsic width.

.card {
flex: 1 1 280px;
}

Each card:

Can grow.
Can shrink.
Uses 280px as its starting flex basis.

.card {
display: flex;
flex-direction: column;
}

Each card also becomes its own flex container.

.card .button {
margin-top: auto;
}

The button is pushed toward the bottom of the card.

FLEX PROPERTY SUMMARY

flex-grow:

.item {
flex-grow: 1;
}

flex-shrink:

.item {
flex-shrink: 1;
}

flex-basis:

.item {
flex-basis: 300px;
}

flex shorthand:

.item {
flex: 1 1 300px;
}

Flexible equal item:

.item {
flex: 1;
}

Fixed Flexbox sidebar:

.sidebar {
flex: 0 0 250px;
}

Individual alignment:

.item {
align-self: center;
}

Visual ordering:

.item {
order: 2;
}

Multiple flex-line alignment:

.container {
flex-wrap: wrap;
align-content: center;
}

COMMON MISTAKES

THINKING FLEX-GROW DEFINES FINAL WIDTH

Example:

.one {
flex-grow: 1;
}

.two {
flex-grow: 2;
}

This means the second item receives twice the share of positive free space, not necessarily twice the final width.

CONFUSING FLEX-BASIS AND WIDTH

flex-basis is the initial main size used by Flexbox.

width is a general sizing property.

Their interaction depends on the Flexbox sizing algorithm.

USING ORDER TO FIX BAD HTML STRUCTURE

Do not write meaningless HTML order and then visually rearrange everything with order.

Keep the DOM structure logical.

CONFUSING ALIGN-ITEMS AND ALIGN-CONTENT

align-items:

Aligns items within flex lines.

align-content:

Distributes multiple flex lines.

USING ALIGN-CONTENT WITHOUT WRAPPING

If there is only one flex line, align-content will not provide the expected multi-line spacing effect.

FORGETTING FLEX-SHRINK

By default:

flex-shrink: 1;

Items may become smaller when space is limited.

USING FLEX-SHRINK: 0 EVERYWHERE

Preventing all shrinking can create horizontal overflow.

Use it only when necessary.

FORGETTING MIN-WIDTH: 0

Flexible content areas containing long content can sometimes refuse to shrink as expected.

A useful solution can be:

min-width: 0;

THINKING FLEX: 1 MEANS WIDTH: 100%

It does not.

flex: 1 controls flexible sizing along the main axis.

USING FIXED WIDTHS FOR ALL FLEX ITEMS

This can reduce the flexibility Flexbox provides.

Use flex-basis and flexible sizing where appropriate.

USING RANDOM ORDER VALUES

Keep visual order consistent with logical reading order whenever possible.

CONFUSING PARENT AND CHILD PROPERTIES

Container properties:

justify-content
align-items
align-content

Item properties:

flex-grow
flex-shrink
flex-basis
flex
align-self
order

NEW & DIFFICULT WORDS

Flex Grow = Property controlling how an item receives positive free space.

Flex Shrink = Property controlling how an item shrinks when available space is insufficient.

Flex Basis = Initial main size of a flex item before free space is distributed.

Flex = Shorthand for flex-grow, flex-shrink and flex-basis.

Align Self = Property allowing an individual flex item to override align-items.

Order = Property controlling the visual ordering of flex items.

Align Content = Property controlling distribution of multiple flex lines along the cross axis.

Free Space = Remaining available space inside a flex container.

Positive Free Space = Extra space available after the flex items’ base sizes are considered.

Negative Free Space = Space deficit when items require more room than the container provides.

Intrinsic Size = Size influenced by an element’s own content.

DOM = Document Object Model.

DOM Order = The logical order of elements in the document.

Shorthand = A CSS property that represents multiple related properties.

Responsive Layout = Layout that adapts to different available screen sizes.

Auto Margin = Margin set to auto that can absorb available free space in Flexbox.

Main Size = Size of an item along the main axis.

Cross Size = Size of an item along the cross axis.

IMPORTANT NOTES

Grow:

flex-grow: 1;

Prevent shrinking:

flex-shrink: 0;

Starting main size:

flex-basis: 300px;

Shorthand:

flex: 1 1 300px;

Equal flexible items:

flex: 1;

Fixed sidebar:

flex: 0 0 250px;

Individual alignment:

align-self: center;

Visual order:

order: 1;

Multiple line distribution:

align-content: space-between;

Flexible content:

.content {
flex: 1;
min-width: 0;
}

Responsive cards:

.card {
flex: 1 1 280px;
}

Remember:

flex = grow + shrink + basis

PRACTICE

Create three flex items with flex-grow: 1.
Change one item to flex-grow: 2.
Compare the free-space distribution.
Test flex-shrink: 1.
Test flex-shrink: 0.
Create items with flex-basis: 250px.
Use flex: 1 1 250px.
Create three items using flex: 1.
Create a two-column flexible layout.
Create a fixed sidebar using flex: 0 0 250px.
Create flexible main content using flex: 1.
Use align-self on one item.
Change visual order using order.
Test negative order.
Create multiple flex lines.
Test align-content values.
Compare align-items and align-content.
Create responsive cards.
Use min-width: 0 on flexible content.
Create a card with a bottom-aligned button using margin-top: auto.

ASSIGNMENT

Create a webpage called:

Advanced Flexbox Practice

The page should contain:

Header
Logo
Navigation
Login button
Sidebar
Main content
Course cards
Buttons
Footer

Requirements:

Use flex-grow.
Use flex-shrink.
Use flex-basis.
Use flex shorthand.
Use flex: 1.
Use align-self.
Use order.
Use align-content.
Use flex-wrap.
Use gap.
Create a fixed-width Flexbox sidebar.
Create flexible main content.
Create responsive cards.
Use auto margin.
Use min-width: 0 where appropriate.

MINI PROJECT

Create an advanced Flexbox dashboard layout.

HTML:

<aside class="sidebar">

    <h2>
        Dashboard
    </h2>

    <p>Home</p>
    <p>Courses</p>
    <p>Students</p>
    <p>Settings</p>

</aside>


<main class="main-content">

    <h1>
        Courses
    </h1>

    <div class="cards">

        <article class="card">

            <h2>HTML</h2>

            <p>
                Learn HTML from beginner to advanced.
            </p>

            <button>
                Start Course
            </button>

        </article>


        <article class="card">

            <h2>CSS</h2>

            <p>
                Learn professional CSS layouts.
            </p>

            <button>
                Start Course
            </button>

        </article>


        <article class="card">

            <h2>JavaScript</h2>

            <p>
                Learn modern JavaScript development.
            </p>

            <button>
                Start Course
            </button>

        </article>

    </div>

</main>

CSS:

.dashboard {
display: flex;

min-height: 100vh;

}

.sidebar {
flex: 0 0 250px;

padding: 30px;

background-color: #0f172a;

color: white;

}

.main-content {
flex: 1;

min-width: 0;

padding: 40px;

}

.cards {
display: flex;

flex-wrap: wrap;

gap: 24px;

}

.card {
display: flex;

flex: 1 1 280px;

flex-direction: column;

padding: 30px;

border: 1px solid #dddddd;

border-radius: 12px;

}

.card button {
margin-top: auto;
}

QUIZ

What does flex-grow control?

Answer:

It controls how a flex item receives a share of available positive free space.

What is the default flex-grow value?

Answer:

What does flex-shrink control?

Answer:

It controls how an item shrinks when the flex container does not have enough available space.

What is the default flex-shrink value?

Answer:

What does flex-basis control?

Answer:

It defines the initial main size of a flex item before Flexbox distributes free space.

What is flex shorthand?

Answer:

It combines:

flex-grow
flex-shrink
flex-basis

What does this mean?

flex: 1 1 300px;

Answer:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;

What is align-self?

Answer:

It allows an individual flex item to override the container’s align-items value.

What does order do?

Answer:

It changes the visual order of flex items.

What is the default order value?

Answer:

What does align-content control?

Answer:

It controls the distribution of multiple flex lines along the cross axis.

When is align-content useful?

Answer:

When a flex container has multiple flex lines and available cross-axis space.

What does flex: 1 commonly do?

Answer:

It allows an item to grow and shrink while using a zero flex basis, making equal-flex siblings share available space in many common layouts.

What does flex: 0 0 250px mean?

Answer:

The item does not grow, does not shrink and has a 250px flex basis.

Why can min-width: 0 be useful on a flex item?

Answer:

It allows the item to shrink below its content’s intrinsic minimum width when necessary.

INTERVIEW QUESTIONS

Q: What is flex-grow?

Answer:

flex-grow defines how much of the positive free space a flex item should receive relative to other flex items.

Q: What is flex-shrink?

Answer:

flex-shrink defines how a flex item participates in shrinking when the total required space exceeds the available space.

Q: What is flex-basis?

Answer:

flex-basis defines the initial main size of a flex item before free space is distributed.

Q: What is the flex shorthand?

Answer:

The flex shorthand combines flex-grow, flex-shrink and flex-basis.

Q: What is the difference between flex: 1 and flex: 1 1 auto?

Answer:

flex: 1 commonly uses a zero flex basis, while flex: 1 1 auto uses the item’s automatic base size. This can produce different space distribution.

Q: What is the difference between align-items and align-self?

Answer:

align-items controls cross-axis alignment for flex items as a group, while align-self allows an individual item to override that alignment.

Q: What is the difference between align-items and align-content?

Answer:

align-items aligns items within their flex lines, while align-content distributes multiple flex lines within the container.

Q: What does order do?

Answer:

order changes the visual order of flex items without changing their logical DOM order.

Q: Why should order be used carefully?

Answer:

Because visual order can become different from reading and keyboard navigation order, which can create accessibility and usability problems.

Q: How can you create a fixed sidebar and flexible content area?

Answer:

Example:

.sidebar {
flex: 0 0 250px;
}

.content {
flex: 1;
min-width: 0;
}

CLASS SUMMARY

In Class 32, you learned Advanced Flexbox.

You learned:

flex-grow
flex-shrink
flex-basis
flex shorthand
flex: 1
flex: auto
flex: none
align-self
order
align-content
Flexible columns
Fixed sidebar layouts
Flexible content areas
Responsive cards
Auto margins
min-width: 0
Equal-height card techniques
Bottom-aligned card buttons

Important shorthand:

flex: grow shrink basis;

Example:

.card {
flex: 1 1 280px;
}

Fixed sidebar:

.sidebar {
flex: 0 0 250px;
}

Flexible content:

.content {
flex: 1;
min-width: 0;
}

Individual alignment:

.item {
align-self: center;
}

Visual order:

.item {
order: 1;
}

Multiple line alignment:

.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}

Remember:

flex-grow
= How positive free space is distributed

flex-shrink
= How items shrink when space is insufficient

flex-basis
= Starting main size

align-self
= Individual cross-axis alignment

order
= Visual order

align-content
= Distribution of multiple flex lines

NEXT CLASS:

Class 033 — CSS Grid Basics

Leave a Reply Cancel reply