Loading

web5

Johan Kohlin

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

Lecture #5

Flexbox

 

Web and user interface design

 

slides.com/jkohlin/web5/live

Today

  • Focus on Flexbox
  • some properties for now
    • display:flex
    • justify-content
    • flex-wrap
    • flex-basis
    • flex-grow/-shrink
  • More selectors
    • Pseudo classes

The lab

quiz time

Quiz results

Flexbox

Simple and powerful tools for distributing space and aligning content 

flexbox

display: flex

A parent property

flexbox

By default, makes child elements stack horizontally (in a row)

Item widths may differ and depend on each item's content.

All heights get stretched to match each other.

flex-wrap

flexbox

controls whether the flex container is single-line or multi-line

flex-wrap:wrap
flex-wrap:nowrap

flex-basis

flexbox

Specifies the initial main size of the flex item, before free space is distributed according to the flex grow-/shrink factors

Values
auto listen to width / height if present, otherwise sets to content
content Automatic size based on the flex item’s content "optimal width"
<value> any value that could be used for width
0 Smallest possible width. Longest word determine

There's a little more to this but we'll get back to that when we talk about flex-direction

flex-grow + flex-shrink

flexbox

Determines how much a flex item will grow relative to the rest of the flex items in the flex container.

determines how much the flex item will shrink relative to the rest of the flex items in the flex container

Values: 0 or any positive number

default:0

default:1

flex 

shorthand for flex-grow flex-shrink flex-basis

flex: 1 0 200px;

/* is the equivalent of: */
flex-grow: 1;
flex-shrink:0;
flex-basis: 200px;

flexbox

align-items

cross-axis alignment

justify-content

main axis alignment

When there is space left in a flex container

justify-content

A parent property to align flex items horizontally

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

center

justify-content

 

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

flex-start (default)

justify-content

 

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

flex-end

justify-content

 

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

space-between

justify-content

 

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

space-around

justify-content

 

 

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

space-evenly

justify-content

A parent property to align flex items horizontally

flexbox

value How child elements align
flex-start
center
space-between
space-around
space-evenly
flex-end

There's a little more to this but we'll get back to that when we talk about flex-direction

align-items

A parent property to align flex items vertically

flexbox

There's a little more to this but we'll get back to that when we talk about flex-direction

center

align-items

A parent property to align flex items vertically

flexbox

stretch (default)

align-items

A parent property to align flex items vertically

flexbox

flex-start

align-items

A parent property to align flex items vertically

flexbox

flex-end

align-items

A parent property to align flex items vertically

flexbox

base-line

TEXT FLOOR

kind of center

flex-direction

make horizontal be vertical

Values

row (default)

column

row-reverse

column-reverse

Confusing behaviour!

When changing direction:

  • justify-contents adjusts vertically
  • align-items adjust horizontally
  • fles-basis becomes height

flex-direction

column-reverse

align-content

(when flex-wrap:wrap)

align-content

(when flex-wrap:wrap)

align-self

A flex-item property

order

re-arranging flex items

/*
 * Lowest number goes to the left. 
 * Negative numbers can be used.
 * 0 is default
 */

.post-image {
  order: -2;
}
.post-container {
  order: -1
}


/*for mobile */

.post-container {
  order: -2
}
.post-image {
  order: -1;
}

Flexbox

Exercise

Make this codepen look like this mockup

Practise flexbox

Lists as menus

  • A menu is a list of links
  • Screen readers say "list of 3 items"
  • Looks like a menu even with CSS disabled

How a screen reader explains menus in lists

Styling lists as menus

the basics

<ul>
    <li>Home</li>
    <li>Products</li>
    <li>About us</li>
</ul>
ul {
    display: flex;
    list-style: none;
    padding: 0;
}
  • Home
  • Products
  • About us

Home Products About us

  1. make children stack horizontally
  2. remove bullets
  3. remove default indentation

Till next time

Ch 13 - Pseudo-elements

CSS Counters