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

estelle.github.io/CSS/flexbox/

Why?

Problem we're trying to solve

Floats

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

Exercise

Open the I have a Dream

Improve the legibility. Consider:

  • line height
  • font face
  • justification
  • spacing

Exercise

Instructions

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

Solution

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;
}

Flexbox

"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

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

Flexible Box Properties

flex-basis
The basis by which the flex-items flex. default: auto
flex-direction
Set the containers axis for its children with row, row-reverse, column or columns-reverse on the parent
flex-flow
Shorthand for flex-direction and flex-wrap properties.
flex-grow
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
flex-shrink
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

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

Flexible Box Properties

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

The Basics

Steps

  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

main-axis

main-axis

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: ...

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.

Keyterms

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>

Accessibility

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

Flexibility

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

Examples

DevTools

Check out the flex box inspector

Exercise

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.

HTML | CSS

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

Tables

Next ➹

Links