CSS Flexbox Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics - - PowerPoint PPT Presentation

Slide 1

CSS Flexbox Layout

Joan Boone

jpboone@email.unc.edu

INLS 572

Web Development

Slide 2

Topics

Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use?

Slide 3

Flexbox Resources

Articles, Tutorials

• A Complete Guide to Flexbox by Chris Coyier
• MDN: Flexbox
• MDN: Typical use cases of Flexbox
• Smashing: Use Cases for Flexbox by Rachel Andrew
• Codepen: Flexbox playground

Specification: CSS Flexible Box Layout Module Caniuse: Browser support

Slide 4

What is Flexbox Really For?

• 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 our 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.

Source:Smashing: Use Cases for Flexbox by Rachel Andrew

The key phrase in the Flexbox specification is “distributing space and aligning content”

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

Source: CSS Tricks – A Complete Guide to Flexbox

Slide 6

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

Source: W3C CSS Flexible Box Layout Module

Slide 7

Flex Container Properties

flex-direction

Source: CSS Tricks – A Complete Guide to Flexbox

justify-content flex-wrap

Slide 8

Flex Container Properties

align-items

Source: CSS Tricks – A Complete Guide to Flexbox

align-content

Slide 9

Flex Item Properties

• rder

Source: CSS Tricks – A Complete Guide to Flexbox

flex-grow align-self

Slide 10

Topics

Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use?

Slide 11

Basic Flexbox Layout: 2 column

flex-2column.html

<div class="content-flex-container"> <aside> <p>Sed ut ...</p> <p>Nemo enim ...</p> </aside> <section> <p>Lorem ipsum ...</p> <p>Duis aute irure ...</p> </section> </div>

Flex Container Flex Items

(direct descendants of Flex Container)

Slide 12

Basic Flexbox Layout: 2 column

flex-2column.html

You can use the shorthand flex property to specify proportions. flex is shorthand for flex-grow, flex- shrink, and flex-basis properties (the last two are optional). If you only specify one parameter, it defines the flex-grow property. flex-grow defines the amount of available space in the container that the item should take up. If all items have flex-grow set to 1, the remaining space in the container is distributed

• equally. In this case, section takes up 3 times as

much space as the other items. <div class="content-flex-container">

<aside> <p>Sed ut ...</p> <p>Nemo enim ...</p> </aside> <section> <p>Lorem ipsum ...</p> <p>Duis aute irure ...</p> </section> </div>

.content-flex-container { display: flex; } aside { background-color: lightcoral; flex: 1; } section { background-color: turquoise; flex: 3; } The default flex-direction for a flex container is row, so the flex items are laid out side by side in this example.

Click to view in CodePen

Slide 13

Flexbox Layout: 3 column

<div class="content-flex-container"> <aside class="aside1"> <p>Lorem ipsum ...</p> </aside> <section> <p>Lorem ipsum ...</p> <p>Pellentesque habitant....</p> </section> <aside class="aside2"> <p>Lorem ipsum dolor...</p> <p>More lorem ipsum dolor ..</p> </aside>

</div>

Flex Items

Flex Container

flex-3column.html

.content-flex-container { display: flex; } .aside1, .aside2 { background-color: lightcoral; flex: 1; } section { background-color: turquoise; flex: 2; }

Slide 14

Exercise: Flexbox Layout

How can you use the flex and order properties to change the proportions

• f the flex items, and the order of the <aside> elements as shown below:

Slide 15

Topics

Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use?

Slide 16

Using Flexbox for Navigation

Flex container with 4 flex items

Slide 17

Using Flexbox for Navigation

<nav class="nav-flex-container"> <a href="">Link 1</a> <a href="">Link 2</a> <a href="">Link 3</a> <a href="">Link 4</a> <a href="">Link 5</a> <a href="">Link 6</a> </nav>

flex-navigation.html

.nav-flex-container { background-color: darkmagenta; display: flex; flex-wrap: wrap; justify-content: center; }

HTML CSS

Slide 18

Using Flexbox for “Split” Navigation

<nav class="nav-flex-container"> <a href="#">Work</a> <a href="#">Services</a> <a href="#">Resources</a> <a href="#">About</a> <a class="push" href="#">Contact</a> </nav>

flex-split-navigation.html

.nav-flex-container { background-color: darkmagenta; display: flex; flex-wrap: wrap; justify-content: center; } .push { margin-left: auto; }

HTML CSS

Source: MDN Split Navigation

Slide 19

Topics

Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use?

Slide 20

Using Flexbox to Center Content

flex-centered-icon.html

<aside class="aside-flex-container"> <i class="fas fa-sun fa-5x"></i> </aside>

Default layout

How to center the icon?

• Put the icon in a flex container
• Add these properties:

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

Slide 21

Media Object Pattern using Flexbox

flex-media-object.html

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.

References

• Solved by Flexbox: Media Object
• CSS-Tricks: The Media Object, A Bunch of Ways
• Flexbox Media Object Examples

Flex container Flex items

National Geographic

align-items: flex-start; max-width: 35%; flex: 1;

Slide 22

Sticky Footer Problem

How to force the footer to stick to the bottom of the page when the page has sparse content?

Slide 23

Sticky Footer Problem

How to force the footer to stick to the bottom of the page when the page has sparse content?

sticky-footer-flex-2column.html

• Add a wrapper <div> around

the page content (header, aside, section, footer)

• Make the wrapper a column-
• riented 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.

Source: Solved by Flexbox: Sticky Footer

Slide 24

Positioning

MDN: position property

The CSS position property lets you alter the positioning scheme

• f a particular element.
• Static: corresponds to the normal flow, and is the default
• Relative: positions an element relative to where it would normally

appear in the page flow

• Absolute: similar to relative positioning but the offset is relative to

the entire browser window

• Fixed: similar to absolute but fixed elements don't scroll with the

rest of the page Top, left, bottom, and right properties specify the offset

Slide 25

Sticky Header + Scrolled Content

Header sticks to the top of the window and content scrolls behind it

header { position: fixed; top: 0; width: 100% } sticky-header-flex-2column.html

The position of the header is fixed to the top edge of its container element, and spans its entire width.

w3schools: On scroll header

Slide 26

Topics

Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media Objects, Sticky Footers and Headers Part 5: Grid or Flexbox: Which layout to use?

Slide 27

Which layout to use?

Flexbox vs. Grid – a few differences

• Flexbox is 1-dimensional, Grid is 2-dimensional
• Flexbox works from the content out, Grid works from the layout in
• More comparison details...
• MDN: Relationship of grid layout to other layout methods
• Beginner's Guide to CSS Grid And Flexbox

Which to use? Use Cases for Flexbox

• You should probably use both, as required
• Consider each component, and decide which is best for it, or what

combination of things are best for it

General reference: Getting Started with CSS Layout

Slide 28

Nested Layouts

MDN: Nested flex boxes

Flex container nested in grid container Flexbox Container Grid Container How many flex containers are there?

Slide 29

Navigation Pattern: Flex or Grid

nav { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; }

nested-grid-navigation.html

Flexbox navigation Grid navigation

<nav> <a href="#" class="navLinks">Home</a> <a href="#" class="navLinks">About Me</a> <a href="#" class="navLinks">Portfolio</a> <a href="#" class="navLinks">Contact Me</a> </nav>

Slide 30

Centering: Flex or Grid

grid-centered-icon.html

Flexbox centering Grid centering

align-items: center; justify-content: center;

Slide 31

Media Objects: Flex or Grid

grid-media-object.html

Flexbox media object Grid media object

Adapted from MDN: Recipe: Media Objects