Floats & Flexbox

Floats & Flexbox

  • Intro to Floats
  • float property
  • Exercise/Solution
  • Intro to flex
  • Flexible Box Properties
  • display property
  • Impacted CSS Properties
  • flex-direction property
  • understanding axes
  • flex-wrap property
  • flex-flow property
  • The Flex Container
  • place|align|justify-items properties
  • Impact of visibility collapse
  • place|align|justify-content properties
  • Flex Items
  • place|align|justify-self properties
  • align-self property
  • order property
  • Accessibility
  • Flexibility
  • flex shorthand
  • Examples
  • DevTools
  • Exercise/Solution
  • Solution



Problem we're trying to solve


float property

float property values

float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

Understanding floats

float features

float features

  • floated to the left or right
  • Still in the flow (v. position: absolute)
  • Text wraps around the float.
  • Adjacent sibling moves up.
  • If all children are floated, parent has no height!
  • floated elements are at least as tall as their floated children

Understanding floats

clear property

Sets whether an element must be moved below (cleared) floating elements that precede it.

clear property values

none | both | left | right | inline-start | inline-end


Open the I have a Dream

Improve the legibility. Consider:

  • line height
  • font face
  • justification
  • spacing



Open the I have a Dream, editing the HTML and the CSS to do the following:

  1. Add a caption to the image
  2. Encase the image, along with the caption, in a box with a border.
  3. There should be white space between all the elements and the border.
  4. Make the text wrap around the image.
  5. Ensure there is white space between the image and the text but not on the outside of the image.

Download exercise


Text - solution

:root {
  font-family: georgia,new times roman, serif;
  font-size: 18px;
  line-height: 1.6;

Images Solution

body {
  max-width: 50em;
  margin: auto;
blockquote {
  border: 1px solid #ccc;
  border-width: 1px 0;
figure {
  float: left;
  width: 40%;
  min-width: 300px;
  padding: 2px 1em 1em 2px;
  margin: 0 1em 1em 0;
  border-right: 1px solid #ccc;
img {
  width: 100%
figcaption {
  font-style: italic;


"What" and "Why"

Problem we're trying to solve

Flex Box

Flex Box

Flex Box

Flex Box

Fixed Header and Footer

Inline Flex

Browser support

screen shot of Can I Use showing Flexbox is supported in all browsers since IE10

With just a few lines ....

Holy Grail Layout

Components of Flexbox

  1. Creation: display
  2. Direction: flex-flow (flex-direction, flex-wrap)
  3. Alignment: justify-content, align-items, align-self, align-content, place-items, place-content
  4. Ordering: order
  5. Flexibility: flex (flex-grow, flex-shrink, flex-basis)
  6. Other: margin, gap

Flexible Box Properties

Values include flex and inline-flex. Used on parent to create the flex container.
flex-start | flex-end | center | space-between | space-around | stretch | space-evenly
flex-start | flex-end | center | baseline | stretch
auto | flex-start | flex-end | center | baseline | stretch
Shorthand for [flex-basis flex-grow, and flex-shrink, or none

Flexible Box Properties

The basis by which the flex-items flex. default: auto
Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent
Shorthand for flex-direction and flex-wrap properties.
Positive number determines how much flex item will grow relative to other flex items in flex container when positive free space is distributed. Positive only
Positive number determines how much flex item will shrink relative to other flex items in flex container when negative free space is distributed.

Flexible Box Properties

To determine whether the boxes are single line or wrap, and the direction, use nowrap, wrap or wrap-reverse
flex-start | flex-end | center | space-between | space-around | space-evenly
Default is auto, not 0
Default is auto, not 0
Integer. Controls order of flex item within flex container
column-gap and row-gap. minimum space between adjacent flex items and lines.

Flexible Box Properties

Shorthand for align-items and justify-items
Shorthand for align-content and justify-content
Shorthand for align-item and justify-item

The Basics


  1. Add display: flex; to the parent of the elements to be flexed.
  2. Set flex-direction to horizontal or vertical
  3. Set flex-wrap to control wrap direction

The display property

All the display properties

display: block | inline | run-in | flow | flow-root | table | flex | grid | ruby | block flow | inline table | flex run-in | list-item | list-item block | list-item inline | list-item flow | list-item flow-root | list-item block flow | list-item block flow-root | flow list-item block | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | inline-block | inline-table | inline-flex | inline-grid | inherit | initial | unset | revert;

display property

inline | block | list-item | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | ruby | none

display: flex;

block-level flex container box

display: inline-flex;

inline-level flex container box

display property

display: inline-flex;

Flex impacts

What is a flex item

Flex items

  1. All non-absolutely positioned child nodes
  2. Generated Content
  3. anonymous flex items => non-empty text nodes

Not flex items

  1. ::first-line & ::first-letter
  2. white space

Kind of

  1. absolutely/fixed positioned elements

Impacted CSS Properties

Changed Properties

  1. margin: adjacent flex items margins do not collapse
  2. min-width & min-height: default is auto, not 0
  3. visibility: collapse;

Ignored Properties

  1. column-* properties
  2. float
  3. clear
  4. vertical-align

flex-direction property

flex-direction property

  • row
  • row-reverse
  • column
  • column-reverse

flex-direction: ... (show gap)

flex-direction: ...

row & column

understanding axes



flex-wrap property

flex-wrap property

  • nowrap
  • wrap
  • wrap-reverse

Purpose: is the whole shebang on one line, or can it wrap if necessary?

flex-wrap: ...

Flex Box

flex-flow shorthand

flex-flow property

Shorthand for flex-direction and flex-wrap

flex-flow: ...


"But wait, there's more!"

--Ed Valenti

The Flex Container

Controlling Flex Items
from the flex container

place-items property

place-items is shorthand for align-items and justify-items

Think of it as aligning within each flex line.

align-items property

Aligns flex items along the cross axis

normal | center | start | end | self-start | self-end | flex-start | flex-end

Baseline alignment

align-items: baseline | first baseline | last baseline

Overflow alignment

safe center | unsafe center

does not take left and right values

align-items property

justify-items property

Defines the default justify-self for all the flex items, justifying items along axis.


auto |  normal |  stretch |  center |  start |  end |  flex-start
flex-end |  self-start |  self-end |  left |  right

Baseline alignment

baseline |  first baseline |  last baseline

Overflow alignment

justify-items: safe center |  unsafe center

Legacy alignment

 legacy right |  legacy left |  legacy center

justify item value ignored in flex if justify-items: normal;

place-items property

Shorthand for align-items and justify-items

  • place-items: [align-items] [justify-items]?;
  • If only one value, the align-items value will be used for both
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

aligns flex items along the cross axis

Impact of visibility: collapse

align-content property

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

Only applies to multi-line flex containers.

Think of it as aligning between multiple lines

align-content property

justify-content property

justify-content: center;     /* Pack items around the center */
justify-content: start;      /* Pack items from the start */
justify-content: end;        /* Pack items from the end */
justify-content: flex-start; /* Pack flex items from the start */
justify-content: flex-end;   /* Pack flex items from the end */
justify-content: left;       /* Pack items from the left */
justify-content: right;      /* Pack items from the right */
justify-content: normal;
justify-content: space-between; /* Evenly, w/ first item at start, last at end */
justify-content: space-around;  /* Evenly. Half the space on ends */
justify-content: space-evenly;  /* Evenly, with equal space on ends */
justify-content: stretch;       /* Evenly. Stretch 'auto'-sized fit container */

justify-content property

Flex Items

Controlling Flex Items

From the flex items themselves

align-self property

  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Override the align-items on a per flex item basis

align-self property

align-self property

order property

div:nth-of-type(3n) {
   order: -1;

The default value is 0. Anything lower will come before those without set values. Anything above will come after.

order: ...

Source Order

<nav> comes after <main>


  1. Source Order
  2. Tab order
  3. Right to Left languages


flex shorthand property

flex-grow: How to divide the extra space. Non-negative number. default: 1.

flex-shrink: How to shrink if there's not enough room. Non-negative number. default: 1.

flex-basis: the starting size before free space is distributed. length value, content or auto . If set to auto, sets to flex item’s main size property.

flex shorthand

flex relative numbers

flex-basis property

flex and flex-basis properties



Check out the flex box inspector


Let's edit our card example just a bit.

  1. Center the heart, spade, diamond, or club that is the text node in your card.


/* card faces */
.face {
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;


Next ➹