Loading

Flexbox: The yoga of CSS

Alejandro Avilés (Ome Gak)

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

Flexbox

{ The yoga of CSS }

Text

Layouts

{ and how to get them right }

(*) This is satire

*

CSS layout modes are algorithms determining the position and the size of boxes based on the way they interact with their sibling and ancestor boxes

{ display: block; }

The good ol' way

Make me float: right;

- A block element

{ display: block; }

let's do it step-by-step

{ display: table; }

The anti-hero

Chakras

Not an HTML table
Allows proper vertical alignment
Gets the job done
...

Tables are bad!

- Some website out there

(for layout)

Limit what you can do in terms of layout
Make redesigns MUCH harder
Semantically incorrect

{ display: table; }

let's do it step-by-step

Tables are for Tabular Data. Period.

- Another website

{ display: flex; }

Aligns and distributes space among items in a container
Vertical and horizontal flows
Makes devs happy!

Chakras

I want to marry flexbox, man

- Ilias Trichopoulos

{ display: flex; }

let's do it step-by-step

Time to flex!

{ The hands-on workshop starts now }

https://slides.com/omegak/flexbox/live

flex container

flex item

flex item

flex item

.container {
  display: flex;
}

{ display: flex; }

.container {
  display: flex;
  justify-content: ...;
}

{ justify-content }

Exercise #1

codepen.io/OmeGak/pen/MJxopg

.container {
  display: flex;
  align-items: ...;
}

{ align-items }

Exercise #2

codepen.io/OmeGak/pen/KaEvVz

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

{ flex-wrap }

.container {
  display: flex;
  align-content: ...;
}

{ align-content }

Exercise #3

codepen.io/OmeGak/pen/KaEyJw

.container {
  display: flex;
}

.item {
  flex-grow: 1;
}

.item2 {
  flex-grow: 2;
}

{ flex-grow }

0

0

0

Exercise #4

codepen.io/OmeGak/pen/vgPJdw

.container {
  display: flex;
}

.item {
  align-self: ...;
}

{ align-self }

.item {
  order: <integer>;
}

Exercise #5

codepen.io/OmeGak/pen/OWqxWp

Final exercise!

codepen.io/OmeGak/pen/egXGrx

Alejandro Avilés

Ilias Trichopoulos

Made with Slides.com