Box Alignment

Chen Hui Jing
Jing
@hj_chen
🇲🇾 🏀 👩‍💻 📝 🦊
Mozilla TechSpeakers

https://events.mozilla.org/techspeakers

Nexmo Developer Relations

🥑 Developer Advocate 🥑

Nexmo
“As CSS developers, we are programmers of boxes.”
Lara Schenck
A box
Multiple boxes
Nested boxes

Where do boxes come from?

CSS

Cool colour font, Playbox by Matt Lyon

“If we hadn’t developed CSS, we could have ended up with the web being a giant fax machine”
Håkon Wium Lie
📠

Wait, what?

🤨
CSS2.2 Visual formatting model
Source document Box tree
CSS2.2 Visual formatting model
Source document Box tree
CSS2.2 Visual formatting model

Layout of boxes

  • Box dimensions and type
  • Positioning scheme (normal flow / float / absolute positioning)
  • Relationships between elements in the document tree
  • External information (e.g. viewport size, intrinsic dimensions of images etc.)
CSS2.2 Visual formatting model

Positioning schemes

Normal flow
Normal flow
Floats
Floats
Absolute positioning
Absolute positioning
CSS2.2 Visual formatting model

What is a formatting context?

Formatting context
CSS Display Module Level 3

The display property

Defines an element's display type,which consists of the
two basic qualities of how an element generates boxes

CSS Display Module Level 3

Inner display type

Defines the generated formatting context for descendant boxes

Inner display type

Outer display type

Dictates a principal box's own participation in flow layout

Outer display type
CSS Display Module Level 3
Short display
Full display Generated box
none subtree omitted from box tree
contents element replaced by content in box tree
ruby inline ruby inline-level ruby container
block ruby block ruby block box containing ruby container
table block table block-level table wrapper box containing table box
inline-table inline table inline-level table wrapper box containing table box
list-item block flow list-item block box with additional marker box
inline list-item inline flow list-item inline box with additional marker box
run-in run-in flow run-in box (inline box with special box-tree-munging rules)
CSS Display Module Level 3
Short display
Full display Generated box
flex block flex block-level flex container
inline-flex inline flex inline-level flex container
grid block grid block-level grid container
inline-grid inline grid inline-level grid container
block block flow block-level block container
flow-root block flow-root block-level block container that establishes a new block formatting context (BFC)
inline inline flow inline box
inline-block inline flow-root inline-level block container
CSS2.2 Visual formatting model

Block formatting context

The context that block-level boxes participate in

Boxes are laid out one after another, in the block flow direction, from the start of the containing block

Block formatting context

Margins along the block flow direction between adjacent block-level boxes in the same block formatting context collapse

CSS2.2 Visual formatting model

Who establishes new block formatting contexts?

  • Floats
  • Absolutely positioned elements
  • Block containers that are not block boxes
  • Block boxes with overflow other than visible
  • Boxes with display set to flow-root
CSS2.2 Visual formatting model

We need a new BFC because...?

1. Prevent collapsing margins

This is a line of text in a p tag.

I'm a box with margins.
I'm another box with margins.

This is a line of text in a p tag.

I'm a box with margins.
I'm another box with margins.
CSS2.2 Visual formatting model

2. Stop text from flowing around the float

I'm a floated box!

This is just a bunch of text that is going on and on so it's long enough to wrap around the float, line boxes yo!

I'm a floated box!

This is just a bunch of text that is going on and on so it's long enough to wrap around the float, line boxes yo!

CSS2.2 Visual formatting model

3. Contains floats

Floaty! ^_^

Floaty too! :)

Floaty! ^_^

Floaty too! :)

CSS2.2 Visual formatting model

Inline formatting contexts

Established by a block container box that contains no block-level boxes

Boxes are laid out one after another, in the inline direction, from the start of the containing block

Inline formatting context
CSS2.2 Visual formatting model

Inline box construction

If an element generates zero boxes, was it really there at all?

If an element generates zero boxes, was it really there at all?

CSS2.2 Text

Alignment along the inline-axis

The text-align property aligns inline boxes along the inline-axis

Horizontal alignment of line boxes

Applicable only when there is extra space available in the line box

CSS2.2 Visual formatting model details

Alignment along the block-axis

Boxes may be aligned along the block-axis in different ways, with the vertical-align property

Vertical alignment of line boxes
CSS2.2 Visual formatting model details

The height of the line box is based on its font, and its line-height

Line height of inline boxes

Explaining the inline-block centring technique

I'm a block-level box that needs to be centred along the block-axis.

Centering in the Unknown by Chris Coyier

CSS Flexible Box Layout Module Level 1

Flex formatting context

Established by a block-level or inline-level flex container box

No margin collapse No floats or clear No vertical-align Absolute positioning still applies
CSS Flexible Box Layout Module Level 1

Flex axes

Flex terminology
CSS Flexible Box Layout Module Level 1

Flex lines

Single flex line, nowrap
nowrap
Multiple flex lines, wrap
wrap
Multiple flex lines, wrap-reverse
wrap-reverse

Flex directions

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
CSS Flexible Box Layout Module Level 1

All the directions

Number of different combinations for flex direction is 64
CSS Flexible Box Layout Module Level 1

Aligning with auto margins

Defining “auto” by Elika Etemad (AKA fantasai)

fantasai | Defining “auto” | CSS Day 2015 from Web Conferences Amsterdam on Vimeo.

Flexbox, Box alignment & Grid
CSS Flexible Box Layout Module Level 1

Aligning along the main axis

justify-content helps distribute extra free space left over after flexible lengths and auto margins are resolved.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
CSS Flexible Box Layout Module Level 1 justify-content values for main axis alignment
CSS Flexible Box Layout Module Level 1

Aligning along the cross axis

align-items sets the default alignment for all flex items along the cross axis of the flex line. Over-ridable by align-self.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
CSS Flexible Box Layout Module Level 1 align-items values for cross axis alignment
CSS Flexible Box Layout Module Level 1

Packing flex lines

align-content aligns flex lines within the flex container if there is extra space along the cross-axis.

1一
2二
3三
4四
5五
6六
7七
8八
9九
10十
11十一
12十二
13十三
14十四
15十五
16十六
17十七
18十八
19十四
20二十
CSS Grid Layout Module Level 1

Grid formatting context

Established by a block-level or inline-level grid container box

No margin collapse No floats or clear No vertical-align Grid lines form containing block
CSS Grid Layout Module Level 1

Grid terminology

CSS grid terminology
CSS Box Alignment Module Level 3

Box alignment properties

Property Axis Aligns Applies to
justify-content main/inline

content within element
(effectively adjusts padding)

Content diagram
block containers, flex containers and grid containers
align-content cross/block
justify-self inline

element within parent
(effectively adjusts margins)

Self diagram
block-level boxes, absolutely-positioned boxes and grid items
align-self cross/block absolutely-positioned boxes, flex items and grid items
justify-items inline

items inside box
(controls child items)

Items diagram
block containers and grid containers
align-items cross/block flex-containers and grid-containers

Flexbox

Flexbox
  • align-content
  • justify-content
  • align-items
  • align-self

The justify-items/justify-self properties do not apply to flex items

Grid

Grid
  • align-content
  • justify-content
  • align-items
  • align-self
  • justify-items
  • justify-self

Flexbox

Flexbox
  • align-content
  • justify-content
  • align-items
  • align-self

The justify-items/justify-self properties do not apply to flex items

Grid

Grid
  • align-content
  • justify-content
  • align-items
  • align-self
  • justify-items
  • justify-self
Text align icons

Justify

CSS Box Alignment Module Level 3
Values justify-content align-content
center justify-content:center align-content:center
start justify-content:start align-content:start
end justify-content:end align-content:end
space-around justify-content:space-around align-content:space-around
space-between justify-content:space-between align-content:space-between
space-evenly justify-content:space-evenly align-content:space-evenly
CSS Box Alignment Module Level 3

justify/align-content

content-distribution properties

A
B
C
D
CSS Box Alignment Module Level 3

justify/align-self

self-alignment properties

A
B
C
D
CSS Box Alignment Module Level 3

justify/align-items

defaults for justify/align-self

A
B
C
D
CSS Box Alignment Module Level 3

Overflow alignment keywords

A
B
C
D
Page 126 of Malerei, Fotografie, Film by Moholy-Nagy Recreation of page 126 of Malerei, Fotografie, Film with grid and flexbox

Original image from Moholy-Nagy, Malerei, Fotografie, Film

Bauhaus in the browser

Featuring...

  • Grid
  • Flexbox
  • Writing mode
  • Transforms
  • Box alignment

https://codepen.io/huijing/pen/PpqomV | Full page demo

.grid {
  display: grid;
  grid-template-columns: 30% 9% 9% 9% 9% 9%;
  justify-content: center;
}

.grid__item:nth-child(1) {
  grid-column: span 3;
  justify-self: end;
  border-right: 1em solid;
  padding: 1em;
  text-align: justify;
  text-align-last: justify;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  .content {
    max-width: 12em;
    letter-spacing: 1px;
  }
  
  p:last-of-type {
    margin-bottom: 1em;
  }
}

.grid__item:nth-child(2) {
  grid-column: 4 / span 3;
  align-self: end;
  font-size: 200%;
  padding: 0.25em;
}

.grid__item:nth-child(3) {
  grid-column: 1 / span 3;
  border-top: 1em solid;
  border-bottom: 1em solid;
  padding: 1em 2em;
  letter-spacing: 1px;
  text-align: justify;

  p:first-child {
    margin-bottom: 1em;
  }
}

.grid__item:nth-child(4) {
  grid-column: 4 / span 3;
  border-top: 1em solid;
  border-bottom: 1em solid;

  display: flex;
  align-items: center;
  justify-content: center;
}

.grid__item:nth-child(5) {
  grid-row: 3 / 5;
  border-right: 1em solid;
  padding: 1em;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  img {
    width: 100%;
    max-width: 20em;
  }
}

.grid__item:nth-child(6) {
  writing-mode: vertical-rl;
  border-right: 1em solid;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.grid__item:nth-child(7) {
  padding: 0.5em 0.25em;
  font-size: 85%;
  border-right: 1em solid;
}

.grid__item:nth-child(8) {
  border-left: 0.5em solid;

  display: flex;
  justify-content: center;
  align-items: center;
}

.grid__item:nth-child(9) {
  letter-spacing: 1px;
  padding: 0.5em 0.25em;
  border-right: 1em solid;
}

.grid__item:nth-child(10) {
  grid-row: 3 / 5;
  grid-column: 6;
  justify-self: center;
  align-self: center;
}

.grid__item:nth-child(11) {
  grid-column: 2 / 4;
  letter-spacing: 1px;
  padding: 0.5em;
  border-top: 1em solid;
  border-right: 1em solid;
}

.grid__item:nth-child(12) {
  border-top: 1em solid;
  border-right: 1em solid;
}

.grid__item:nth-child(13) {
  border-top: 1em solid;
  border-right: 1em solid;
}
Self-alignment properties
These are not the borders you are looking for
Display flex on grid items
That's more like it

References and resources

Thank you!

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing

Font used is Mission Gothic, by James T. Edmondson and Trevor Baum