Bootstrap Module 19

  Module 19 : Responsive Flexbox Utilities.

Core Flexbox Concepts

1. Main axis vs Cross axis

The main axis is the direction in which flex items are laid out (flex-direction). For row, main axis is horizontal; for column, vertical.

                     

The cross axis is perpendicular to the main axis and used for alignment (align-items, align-self).

2. Flex container vs Flex items

A flex container is any element with display: flex (or inline-flex). It establishes formatting context.

Flex items are direct ; they participate in flexible sizing controlled by flex-grow, flex-shrink, and flex-basis.

3. Flex properties

flex-direction: row | row-reverse | column | column-reverse — controls direction of layout.

flex-wrap: nowrap | wrap | wrap-reverse — controls whether items wrap to new lines.

justify-content: distributes free space along the main axis (start, end, center, space-between, space-around, space-evenly).

align-items: aligns items along cross axis (stretch, flex-start, flex-end, center, baseline).

align-content: multi-line alignment along the cross axis when there is extra space.

order: reorders items without changing DOM.

flex shorthand: flex: <grow> <shrink> <basis> (e.g., flex: 1 1 0%).

4. Intrinsic sizing and min/max behaviors

min-width / min-height and max-width / max-height interact with flex item sizing; these can prevent flex items from shrinking beyond readable sizes.

         

flex-basis: auto uses the item’s content size as the starting point.

5. Responsive considerations

Flexbox excels for 1-dimensional layouts and adaptive flow; use it combined with breakpoints to change flex-direction, wrapping, and order for different viewports.

Responsive Flexbox Utilities 

Utilities are single-purpose classes that encapsulate one behavior. Responsive utilities add breakpoint prefixes to apply the utility only at a certain min-width (mobile-first approach). 

Example:

u-flex → display: flex

u-flex-row → flex-direction: row

u-flex-col → flex-direction: column

u-flex-wrap → flex-wrap: wrap

u-justify-center → justify-content: center

Then breakpoint variants: md:u-flex-row applies at min-width: 768px.

Mobile-first breakpoint approach: base styles apply to smallest screens; use @media (min-width: ...) for larger screens.

Concrete Utility CSS 

/* Base utilities (mobile-first) */

.u-flex { display: flex; }

.u-inline-flex { display: inline-flex; }

.u-flex-row { flex-direction: row; }

.u-flex-col { flex-direction: column; }

.u-flex-wrap { flex-wrap: wrap; }

.u-justify-start { justify-content: flex-start; }

.u-justify-center { justify-content: center; }

.u-justify-between { justify-content: space-between; }

.u-items-center { align-items: center; }

.u-items-stretch { align-items: stretch; }

.u-gap-1 { gap: 0.25rem; }

.u-gap-2 { gap: 0.5rem; }

.u-gap-4 { gap: 1rem; }

.u-flex-1 { flex: 1 1 0%; }

.u-flex-auto { flex: 1 1 auto; }

.u-order-1 { order: 1; }

.u-order-0 { order: 0; }

/* Breakpoints (example) */

@media (min-width: 640px) { /* sm */ }

@media (min-width: 768px) { /* md */ }

@media (min-width: 1024px) { /* lg */ }

@media (min-width: 1280px) { /* xl */ }

/* Example responsive utility: */

@media (min-width: 768px) {

 .md\:u-flex-row { flex-direction: row; }

 .md\:u-flex-col { flex-direction: column; }

 .md\:u-justify-between { justify-content: space-between; }

}

Note: when authoring utility CSS, escape colon in class names inside CSS (hence \: above).

Examples

Example 1 — Responsive Card Grid (cards stack on mobile, grid on tablet+)

<div class="u-flex u-flex-col u-gap-4 md:u-flex-row md:u-flex-wrap md:u-justify-between">

 <article class="u-flex-1 u-min-w-0">Card A content</article>

 <article class="u-flex-1 u-min-w-0">Card B content</article>

 <article class="u-flex-1 u-min-w-0">Card C content</article>

</div>

Explanation:

Mobile: u-flex + u-flex-col stacks cards vertically.

md:u-flex-row converts to a row on >=768px. u-flex-1 ensures equal flex growth; u-min-w-0 (utility you can add) allows items to shrink past their content's min size to avoid overflow.

Example 2 — Responsive Navigation (hamburger -> horizontal)

                  

<header class="u-flex u-justify-between u-items-center p-4">

 <div class="brand">MySite</div>

 <nav class="u-flex u-flex-col md:u-flex-row md:u-gap-4">

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

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

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

 </nav>

</header>

Explanation:

Nav is stacked on mobile for easier tapping; switches to horizontal on md and above.

Example 3 — Media Object (image left, text right; stacks on narrow)

<div class="u-flex u-items-start u-gap-4 md:u-items-center">

 <img src="avatar.jpg" alt="" class="avatar u-flex-none" style="width:96px;height:96px;">

 <div class="content">

   <h3>Title</h3>

   <p>Details...</p>

 </div>

</div>

Explanation: u-flex-none makes the image a fixed-size item that does not grow; content flows next to it on wider screens.

Tips:

Use visual aids: show axes, growing/shrinking with resizing.

open DevTools, change flex values and observe.

Compare naive float-based layouts vs Flexbox to show benefits and pitfalls.

Exercises

Exercise 1 — Stacked-to-Grid Cards

Goal: Build a 3-card layout that stacks on mobile and forms a 3-column row on desktop (>=1024px), with equal heights and gaps.

Hints:

Use u-flex, u-flex-col, lg:u-flex-row, u-gap-4, and make each card u-flex-1.

Use align-items: stretch so cards have equal height.

Solution sketch:

<div class="u-flex u-flex-col lg:u-flex-row u-gap-4">

 <article class="u-flex-1 u-flex u-flex-col"> ... </article>

 <article class="u-flex-1 u-flex u-flex-col"> ... </article>

 <article class="u-flex-1 u-flex u-flex-col"> ... </article>

</div>

Walkthrough: u-flex-1 lets each card grow equally. Wrapping isn't necessary in this exact case because lg:u-flex-row is only applied at large screens.

Exercise 2 — Responsive Footer with Reordered Columns

Goal: Create a footer with 3 columns: on desktop the order should be [Links | About | Social], but on mobile you want [About | Links | Social]. Use order utilities.

Hints:

Default (mobile) order classes should match desired mobile sequence.

Use md:u-order-? to change order at breakpoints.

Solution sketch:

<footer class="u-flex u-flex-col md:u-flex-row u-gap-4">

 <div class="u-order-2 md:u-order-1">Links</div>

 <div class="u-order-1 md:u-order-2">About</div>

 <div class="u-order-3">Social</div>

</footer>

Walkthrough: On mobile the About block appears first (u-order-1), while on md it moves to the second position.

Exercise 3 — Shrinkable Sidebar + Content

Goal: Build a two-column layout where the sidebar has a fixed width and the content grows and shrinks responsively. On narrow screens the sidebar should move below content.

Hints:

Use u-flex, u-flex-col md:u-flex-row and u-flex-none for sidebar width, and u-flex-1 for content.

Solution sketch:

<div class="u-flex u-flex-col md:u-flex-row">

 <aside class="u-flex-none" style="width:280px;">Sidebar</aside>

 <main class="u-flex-1">Content</main>

</div>

Walkthrough: On mobile u-flex-col stacks sidebar under content; at md breakpoint they sit side-by-side.

 A — Build a Responsive Dashboard Header 

Requirements:

Left: Logo

Middle: Search bar that grows to available space and collapses to icon on small screens

Right: Action buttons and user avatar

Layout should handle shrinking gracefully; search should take remaining space using flex.

Guidance: Make the container u-flex u-items-center u-gap-2. Use u-flex-1 for the search wrapper and u-flex-none for fixed-width elements.

 B — Complex Card Grid with Variable Column Count 

                

Requirements:

On mobile: one column

On sm: two columns

On lg: three or four columns depending on width

Cards should have equal height; content inside card should be vertically distributed (header, body, footer)

Guidance: Use utilities plus flex inside each card and flex-direction: column with justify-content: space-between for vertical distribution.