INLS 572

Web Development

CSS Flexbox Layout

Joan Boone
jpboone@email.unc.edu
Slide 1
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 2
 Flexbox Resources
Introduction
• MDN Web Docs: Flexbox
• w3schools: CSS Flexbox
• CSS-Tricks: A Complete Guide to Flexbox

Articles, Tutorials, Examples

• MDN Web Docs: Typical use cases of Flexbox
• Smashing: Use Cases for Flexbox
• Tobias Ahlin Blog: Common CSS Flexbox Layout Patterns
• Learning tools: Flexbox playground, Flexbox Froggy

Specification
• CSS Flexible Box Layout Module
• Browser support
Slide 3
 What is Flexbox Really For?
The key phrase in the Flexbox specification is
“distributing space and aligning content”
• Flexbox is all about taking a bunch of things of varying sizes and fitting
them into a container which itself has a varying size.
• Flexbox is squishy.
• Flexbox tries to create the best possible layout for items, giving bigger
items more space and smaller items less space, thus preserving the
readability of content.
• If you find Flexbox hard and weird, it is often because you are trying to use
Flexbox as a grid system.
If so, you are fighting against the very thing that makes it Flexbox, i.e., its
inherent flexibility.
• Patterns that suit flex layout well are those where we are not so interested
in having a pixel-perfect size for each.
We just want them to display well alongside each other.

Use Cases for Flexbox by Rachel Andrew Slide 4

CSS Flexible Layout Module (Flexbox)
Model and Terminology

Contents (flex items) of a flex container can

• be laid out in a row or column direction
• have their display order reversed or rearranged
• be laid out linearly along a single axis or wrapped into multiple lines
• flex their sizes to respond to available space
• be aligned with respect to the container or each other
W3C CSS Flexible Box Layout Module Slide 5
 Flexbox Layout: Basic Model

CSS Flexbox is a model where you can lay out elements in a row or
column. The elements “flex” their sizes, either by growing to fill unused
space or shrinking to avoid overflowing the parent container
• Flex Container is the element on which display:flex is applied
• Flex Items are the children, or direct descendants, of the Flex Container

CSS-Tricks: A Complete Guide to Flexbox

Slide 6
 Flex Container Properties
flex-direction
justify-content

flex-wrap

CSS-Tricks: A Complete Guide to Flexbox

Slide 7
 Flex Container Properties
align-items align-content

CSS-Tricks: A Complete Guide to Flexbox

Slide 8
 Flex Item Properties
order flex-grow

align-self

CSS-Tricks: A Complete Guide to Flexbox Slide 9

Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 10
 Basic Flexbox Layout
Flex container Flex items

<div class="wrapper"> HTML

<header>Header</header>
<aside>
<p>Sed ut ...</p><p>Nemo ....</p>
</aside>
<section>
<p>Lorem ipsum ...</p><p>Duis aute ...</p>
</section>
<footer>Footer</footer>
</div>

.wrapper {
display: flex; CSS
flex-direction: column;
gap: .5em;
}

CSS Flexbox defines a one-dimensional layout that is either row or column oriented.
A flexbox is defined by a flex container – this is the HTML element with a
display:flex property. The flex items are the children, or direct descendants, of
the flex container.
flex-direction defines the orientation. By default, it is row-oriented.
gap defines the size of the gap between rows and columns.
basic-flex.html Slide 11
 2-Column Flexbox Layout
using a nested flexbox HTML
<div class="wrapper">
<header>Header</header>
<div class="content-wrapper">
<aside>
<p>Sed ut ...</p><p>Nemo ....</p>
</aside>
<section>
<p>Lorem ...</p><p>Duis aute ...</p>
</section>
</div>
<footer>Footer</footer>
</div>

CSS
.wrapper { .content-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: .5em; gap: .5em;
} }

basic-2-column-flex.html Slide 12
 Responsive
2-Column Flexbox

.wrapper {
display: flex;
flex-direction: column; @media (min-width: 64em) {
gap: .5em;
.content-wrapper {
}
flex-direction: row;
.content-wrapper { }
display: flex;
flex-direction: column; aside { flex: 1; }
gap: .5em; section { flex: 2; }
} }

responsive-2-column-flex.html Slide 13
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 14
Card Layout with Flexbox (without media query)

Cards have a
minimum width (15em)
that “grows” as needed
to fill available space

* { box-sizing: border-box; }

section {
... Include element's
display: flex; border and padding
flex-wrap: wrap; when determining size
}
article {
...
width: 15em; /* 240px */
flex-grow: 1;
Mobile-first /* 2 lines above can be replaced with */
/* flex: 1 1 15em; */
}

flex-cards-no-media-query.html Element will flex-grow (1) and flex-shrink (1), as needed

to fill available space, but keep a minimum width (15em)
w3schools: CSS Box Sizing Slide 15
 Card Layout with Flexbox (with media query)

Suppose you want

more control over the
layout so that there
are no more than 2
cards in a row

article {
...
width: 100%;
Set the width so that }
no more than 2 @media (min-width: 50.0em) {
Mobile-first cards will fit in a row article {
width: 35%;
flex-grow: 1;
}
}
flex-cards-media-query.html
Slide 16
 Nested Flexboxes
with and without a media query

“Responsive by default”

strawberry-media-query.html

strawberry-no-media-query.html
Slide 17
 “Responsive by Default” Flexbox
Source: Using Media Queries for Responsive Design in 2018

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

.flex > * {
flex: 1 1 250px;
margin: 10px;
}

responsive-by-default-flex.html Slide 18
 “Responsive by Default”
Flexbox vs. Grid for Card Layout
Flexbox fills all of the available
space with the cards, although
this can result in different
sized cards.

Grid, on the other hand,

maintains the card size, but
may result in gaps.

.wrapper > * {
flex: 1 1 250px;
margin: 2%;
}

card-flex.html Slide 19
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 20
 Media Object Pattern
The Media Object pattern is found everywhere – it refers to a two-column
box with an image on one side and descriptive text on the other.

National Geographic Flex container

align-items: flex-start;

max-width: 35%; flex: 1;

Flex items flex-media-object.html

References
• Solved by Flexbox: Media Object
• Some variations: Flexbox Media Object Examples
• CSS-Tricks: How to create a media object with Grid
Slide 21
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 22
Centering Content Pattern
“wrapper” flex container
for overall page layout
“content-wrapper” flex container
for sidebar and main content
HTML
aside element flex container for
logo and label

flex-centering-content.html Slide 23
 Centering Content Pattern
<aside>
<i class="fas fa-sun fa-4x"></i>
<p>My logo goes here</p>
</aside> HTML
aside {
display: flex; CSS
flex-direction: column;
HTML align-items: center;
justify-content: center; }

aside element flex container

flex-centering-content.html
Slide 24
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 25
 Header (or navigation) Pattern

<nav class="flex-container"> .flex-container {

<a href="">Products</a>
background-color: mediumturquoise;
<a href="">Services</a>
display: flex;
<a href="">Support</a>
<a href="">Careers</a> flex-wrap: wrap;
<a href="">About</a> justify-content: center;
</nav> }

<nav class="split-container"> .split-container {

<a class="push" href=""> background-color: salmon;
<i class="fas fa-pencil-paintbrush"></i> display: flex;
Logo goes here</a> flex-wrap: wrap;
<a href="">Products</a> justify-content: center;
. . . }
<a href="">About</a> .push { margin-right: auto; }
</nav>

MDN Web Docs: Split Navigation header-footer.html Slide 26

 Footer Pattern

<footer class="footer-container">
<p>How to find me...</p>
<a href=""><i class="fas fa-envelope-square fa-2x"></i></a>
<a href=""><i class="fab fa-twitter-square fa-2x"></i></a>
<a href=""><i class="fab fa-instagram-square fa-2x"></i></a>
<a href=""><i class="fab fa-facebook-square fa-2x"></i></a>
<a href=""><i class="fab fa-linkedin fa-2x"></i></a>
</footer>

.footer-container {
background-color: slateblue;
display: flex; These are references to
flex-wrap: wrap; Font Awesome icons
justify-content: flex-start;
}

header-footer.html
Slide 27
Part 1: Flexbox Overview
Part 2: Multi-column Layout
Part 3: Card Layout
Part 4: Media Object Pattern
Part 5: Centering Content Pattern
Part 6: Header and Footer Patterns
Part 7: Sticky Header/Footer Patterns

Slide 28
 Sticky Footer Problem
How to force the footer to stick to the bottom of the page when the
page has sparse content?

Slide 29
 Sticky Footer Solution
How to force the footer to stick to the bottom of the page when the
page has sparse content?
Source: Solved by Flexbox: Sticky Footer
• Add a wrapper <div> around
the page content (header,
aside, section, footer)
• Make the wrapper a column-
oriented flex container
• Set its min-height:
100vh; This corresponds to
100% of the browser viewport
height
• For the .content-flex-
container (aside, section),
set flex:1 -- forces main
content to use all vertical
space.
sticky-footer-flex-2column.html Slide 30
 Sticky Header + Scrolled Content
Header sticks to the top of the window and content scrolls behind it

header { The position of the header is fixed to

position: fixed;
top: 0; the top edge of its container element,
width: 100% and spans its entire width.
}

w3schools: On scroll header sticky-header-flex-2column.html Slide 31