dr zoidberg from futurama, knitting a scarf

Erin Zimmer

flex.ez.codes

Layout mode

Controls how children are positioned
Grants access to some properties

CSS Layout modes

Normal flow
Float
Multi-column layout
Table layout
Flexible box layout
Grid layout

Introduction to CSS layout on MDN

normal flow

Normal flow is for laying out text.

recipetineats

pages that are mostly text-based

Le Petit Prince - Gutenberg

or pages that include text & images

r/discworld • 5 yr. ago

CodeDinosaur Bel-Shamharoth

Entry for the humorously shaped vegetables section in the times.

Dear mr. de Worde.

Enclosed in this parcel you'll find an Vegetable I think fits your HSV section.

Can't understand why everyone kept remarking "What duck" at the postal office though.

With kind regards,

Josia Wintler.

25

And it doesn't have to be the whole page - text bit in the middle of this reddit post is normal flow

float

we can also jazz up normal flow a little float, which gives us a way to combine images and text a little more dynamically.

columns

IT IS THE COLDEST WINTER IN LIVING MEMORY, AND THAT'S OFFICIAL

Dr Fettle Dodgast (132) of Unfeen University, told the Times: "It if as cold as I can remember. Mind you, we don't get the winter thefe days that we had when I was young.'

Isicles as long as a man's arm have been seen on gutters about the city and many pumps have frozen.

Dr Dodgast (132) says the winter is worse than the one in 1902 when wolves invaded the city. He added 'and we were glad of that, because we hadn't seen fresh meat for a fortnight'

...

Mr Josia Wintler (45) of 12b Martlebury Street has a Humerous Vegetable that he will exhibit to all comers upon payment of a small sum. It is most droll.

...

Mr Clarence Harry (39) begs to inform the public that he has lost a valuable watch, probably in the area of Dolly Sisters. Reward to finder. Please report to Times office.

...

A iconographer with thier own equpptment vanted by this publication. Apply at the Times office, The sign of the Bucket.

...

Terry Pratchett, The Truth (2000)

limited use on the web, as the entire content needs to fit the viewport

IT IS THE COLDEST WINTER IN LIVING MEMORY, AND THAT'S OFFICIAL

Dr Fettle Dodgast (132) of Unfeen University, told the Times: "It if as cold as I can remember. Mind you, we don't get the winter thefe days that we had when I was young.'

Isicles as long as a man's arm have been seen on gutters about the city and many pumps have frozen.

The Ankh-Morpork Times: the truth shall make ye free

Dr Dodgast (132) says the winter is worse than the one in 1902 when wolves invaded the city. He added 'and we were glad of that, because we hadn't seen fresh meat for a fortnight'

...

Mr Josia Wintler (45) of 12b Martlebury Street has a Humerous Vegetable that he will exhibit to all comers upon payment of a small sum. It is most droll.

...

Mr Clarence Harry (39) begs to inform the public that he has lost a valuable watch, probably in the area of Dolly Sisters. Reward to finder. Please report to Times office.

...

A iconographer with thier own equpptment vanted by this publication. Apply at the Times office, The sign of the Bucket.

...

do allow for doing some cool stuff though with very simple css. probably more useful for print layouts

Star Trek: Lower Decks

2020

4 seasons

Star Trek: Lower Decks, a new half-hour animated comedy series, focuses on the support crew serving on one of Starfleet's least important ships, the U.S.S. Cerritos, in 2380.

Starring Tawny Newsome, Jack Quaid, Noël Wells, and Eugene Cordero.

table

Stan

gmail

Ikea

<table>

grid & flex

some cases, only flex or grid will work, but those cases are boring and easy to work out. what we really want to know is, for all the overlapping cases, what's the easiest way to do it, without having to try both and see

Grid

Flex

developer

browser

parent

children

parent

children

Grid

Flex

developer

browser

parent

children

25

Grid

Flex

developer

browser

parent

children

strongly suggests we should use flex

.container {
  display: flex; 
}

 .container {
  display: grid; 
  grid-auto-flow: column;
} .container {
  display: grid; 
  grid-auto-flow: column;
}

and if we look at how we could implement this in CSS, it bears out that conclusion. grid works, but it's weird. use flex

1 Day
7 Days
4 Weeks
1 Year

even vertically, flex is shorter, but easier to understand

.container {
  display: flex;
  flex-direction: column;
}

.container {
  display: grid;
}

the grid code is shorter, but it's still weird, and the flex is easier to understand

Assigned to Me

Grid

Flex

developer

browser

parent

children

.container {
  display: flex;
}

.container > :first-child {
  flex-grow: 1;
}

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

 .container {
  display: flex;
}
 
.container > :first-child {
  flex-grow: 1;
} .container {
  display: flex;
}
 
.container > :first-child {
  flex-grow: 1;
}

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

.container {
  display: flex;
}

.container > :first-child {
  flex-grow: 1;
}

 .container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
} .container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
} .container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
} .container {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

Assigned to Me

 .container {
  display: flex;
}
 
.title {
  flex-grow: 1;
} .container {
  display: flex;
}
 
.title {
  flex-grow: 1;
}

samosa

Triangular shaped savoury pastry filled with mashed potatoes.

$10

butter chicken

Tender pieces of chicken marinated overnight, part-cooked in a clay oven and simmered in a silky tomato sauce.

$22

aloo gobi

Cauliflower, potato tossed with tomato, ginger and spices.

$18

Grid

Flex

developer

browser

parent

children

 .container {
  display: grid;
  grid-template-columns: 40px 1fr max-content;
  grid-template-areas: 'icon name price'...;
}
 
.icon {
  grid-area: icon;
}
 
.name {
  grid-area: name;
} .container {
  display: grid;
  grid-template-columns: 40px 1fr max-content;
  grid-template-areas: 'icon name price'...;
}
 
.icon {
  grid-area: icon;
}
 
.name {
  grid-area: name;
} .container {
  display: grid;
  grid-template-columns: 40px 1fr max-content;
  grid-template-areas: 'icon name price'...;
}
 
.icon {
  grid-area: icon;
}
 
.name {
  grid-area: name;
}

this one actually only works in grid, which kind of forces the sliders. dev must know the max number of elements that can occur before the search bar, layout must come from parent, etc

bottom-up

one-piece

seamed

short-rows

stripes-colorwork

worked-flat

Ravelry

Grid

Flex

developer

browser

parent

children

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

S1 E1 06/08/20

Second Contact

S1 E2 13/08/20

Envoys

S1 E3 20/08/20

Temporal Edict

S1 E4 27/08/20

Moist Vessel

S1 E5 03/09/20

Cupid's Errant Arrow

S1 E6 10/09/20

Terminal Provocations

S1 E7 17/09/20

Much Ado About Boimler

S1 E8 24/09/20

Veritas

S1 E9 01/10/20

Crisis Point

S1 E10 08/10/20

No Small Parts

Grid

Flex

developer

browser

parent

children

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

.container > * {
  width: var(--width);
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
}

could go either way

 .container {
  display: flex;
  flex-wrap: wrap;
}
 
.container > * {
  width: var(--width);
} .container {
  display: flex;
  flex-wrap: wrap;
}
 
.container > * {
  width: var(--width);
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
}

could go either way

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

.container > * {
  width: var(--width);
}

 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
} .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
} .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
}

could go either way

Lower Decks

4 seasons

Discovery

5 seasons

The Original Series

3 seasons

The Next Generation

7 seasons

Deep Space Nine

7 seasons

Voyager

7 seasons

Enterprise

4 seasons

Short Treks

2 seasons

Picard

3 seasons

The Animated Series

2 seasons

Prodigy

1 seasons

Strange New Worlds

2 seasons

but what if we want more than one size? like we want to show whether tv series are shot in standard or hi def? well, we can still do it with either grid or flex, assuming we can make all the sizes out of a single multiple.

 .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
}
 
.container > .sd {
  grid-column: span 3;
}
 
.container > .hd {
  grid-column: span 4;
} .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--width));
}
 
.container > .sd {
  grid-column: span 3;
}
 
.container > .hd {
  grid-column: span 4;
}

we can still do this with grid in this case, because the hd ratio is about 4/3 the width of the sd one, so we can do a little finagling with column spans and make it work. but it kind of relies on there being a simple ratio between the two sizes

Lower Decks

4 seasons

Discovery

5 seasons

The Original Series

3 seasons

The Next Generation

7 seasons

Deep Space Nine

7 seasons

Voyager

7 seasons

Enterprise

4 seasons

Short Treks

2 seasons

Picard

3 seasons

The Animated Series

2 seasons

Prodigy

1 seasons

Strange New Worlds

2 seasons

 .container {
  display: flex;
  flex-wrap: wrap;
}
 
.container > .sd {
  width: var(--sd-width);
}
 
.container > .hd {
  width: var(--hd-width);
} .container {
  display: flex;
  flex-wrap: wrap;
}
 
.container > .sd {
  width: var(--sd-width);
}
 
.container > .hd {
  width: var(--hd-width);
}

whereas with the flex version, we can just make the sizes whatever we want. and it's a bit easier to understand what's going on. so use the grid version if you want to maintain that ratio, the flex version if it's not important

ruffle

pan

tease

wise

lay

trim

kettle

set

fringe

place

geeze

pot

put

seize

griddle

frill

NY Times - Connections

super basic example of this is the game from before

Grid

Flex

developer

browser

parent

children

.container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

2d layout?

grid

and this is generally true in any situation where we need to layout multiple rows of things, and there's some relationship between the rows. grid lets us do it in CSS, flex requires additional markup

bottom-up

one-piece

seamed

short-rows

stripes-colorwork

worked-flat

bottom-up

one-piece

seamed

short-rows

stripes-colorwork

worked-flat

.main {
  display: flex;
}

.right-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gadget-preview {
  flex-grow: 1;
}

.main {
  display: flex;
}

.right-panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.gadget-preview {
  flex-grow: 1;
}

<modal>
  <header />
  <gadgets />
  <preview />
  <footer />
</modal>

.modal {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: 
    "header header"
    "gadgets preview"
    "gadgets footer";
}

.header {
  grid-area: header;
}
.gadgets {
  grid-area: gadgets;
}
.preview {
  grid-area: preview;
}
.footer {
  grid-area: footer;
}

<modal>
  <header />
  <gadgets />
  <preview />
  <footer />
</modal>

 .modal {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: 
    "header header"
    "gadgets preview"
    "gadgets footer";
}
 
.header {
  grid-area: header;
}
.gadgets {
  grid-area: gadgets;
}
.preview {
  grid-area: preview;
}
.footer {
  grid-area: footer;
} .modal {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: 
    "header header"
    "gadgets preview"
    "gadgets footer";
}
 
.header {
  grid-area: header;
}
.gadgets {
  grid-area: gadgets;
}
.preview {
  grid-area: preview;
}
.footer {
  grid-area: footer;
}

Grid

Flex

developer

browser

parent

children

high level

low level

Erin Zimmer

flex.ez.codes

THANK YOU

Do we even need flex anymore?

Erin Zimmer

Layout mode

CSS Layout modes

normal flow

Entry for the humorously shaped vegetables section in the times.

float

CHAPITRE III

CHAPITRE IV

columns

IT IS THE COLDEST WINTER IN LIVING MEMORY, AND THAT'S OFFICIAL

IT IS THE COLDEST WINTER IN LIVING MEMORY, AND THAT'S OFFICIAL

Star Trek: Lower Decks

table

grid & flex

Grid

Flex

Grid

Flex

Grid

Flex

Grid

Flex

Grid

Flex

Grid

Flex

Grid

Flex

Grid

Flex

grid

Grid

Flex

high level

low level

Erin Zimmer

	.container {
	display: flex;
	}

	.container > :first-child {
	flex-grow: 1;
	}

	.container {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr;
	}

	.container {
	display: grid;
	grid-template-columns: 40px 1fr max-content;
	grid-template-areas: 'icon name price'...;
	}

	.icon {
	grid-area: icon;
	}

	.name {
	grid-area: name;
	}

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

	.container > * {
	width: var(--width);
	}

	.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, var(--width));
	}

	.modal {
	display: grid;
	grid-template-columns: max-content 1fr;
	grid-template-rows: min-content 1fr min-content;
	grid-template-areas:
	"header header"
	"gadgets preview"
	"gadgets footer";
	}

	.header {
	grid-area: header;
	}
	.gadgets {
	grid-area: gadgets;
	}
	.preview {
	grid-area: preview;
	}
	.footer {
	grid-area: footer;
	}