Box Alignment

@hj_chen

🇲🇾 🏀 👩‍💻 📝 🦊

https://events.mozilla.org/techspeakers

🥑 Developer Advocate 🥑

“As CSS developers, we are programmers of boxes.”
—Lara Schenck

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?

🤨

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

Positioning schemes

Positioning schemes. To be honest, until I read the spec, I didn't know this was a thing. But it's important because there's some terminology introduced here that pretty much sets up the remainder of the talk.

There are 3 types of positioning schemes, normal flow, floats and absolute positioning.

Boxes in a normal flow will belong to a formatting context. And right now, we have several of those. Relatively positioned boxes remain part of this normal flow.

When we float a box, it is first laid out in the normal flow, then taken out of it and shifted as far left, or right, as possible.

When a box is absolutely positioned, it's removed from the normal flow altogether, and given a position with respect to its containing box.

What is a formatting context?

The `display` property

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

Inner display type

Defines the generated formatting context for descendant boxes

Outer display type

Dictates a principal box's own participation in flow layout

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)

This table is directly lifted from the specification, and fills up 2 slides. If you pay attention to the ‘full’ column, notice that the outer display property is either block or inline. I'm glossing over run-in for now because its implementation status has been iffy for a long time.

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

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

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

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

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.

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!

3. Contains floats


  Floaty! ^_^
  Floaty too! :)

Floaty! ^_^

Floaty too! :)

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 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?

This is an example of a block box that contains 5 inline boxes, the block box in this case, being the p element. For now there is enough room so all 5 boxes fit into a single line box. But when there isn't enough room, inline boxes can be split across multiple line boxes.

Splitting an inline box is like slicing a Snickers bar. The cut part won't have any chocolate coating on it, so margins, paddings and borders don't apply to the “split” part of the box.

Only margins and padding along the inline axis have any visible effect on the inline box. I'll put some background colour on so you can see that even though padding is applied all around, the distance between the line boxes do not change.

Though there could be some interesting things from a design perspective that might work here. Not sure, maybe throw in some blend-modes (screen).

Alignment along the inline-axis

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

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

Alignment along the block-axis

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

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

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

Flex formatting context

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

Flex axes

Flex lines

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二十

All the directions

Number of different combinations for flex direction is 64

Aligning with `auto` margins

Alright, time to align some boxes. I'm going to start with something that is somewhat direction agnostic. For flex layouts, margins are distributed before alignment properties kick in.

Any positive free space will be distributed to auto margins in their respective dimensions. So if I set a margin-left: auto, Boxie ends up all the way on the other end of the container. And if I do a margin-top: auto, Boxie gets sent all the way down.

If we don't specify a dimension, then any free space will be equally distributed on either side of the flex item. And I love showing this example to people who have just started out with CSS and ran into a wall when it comes to centring items.

Set a margin: auto and boom, 1-line solution to all your centring problems. A small caveat here is that this trick works best if you have only 1 flex child.

Defining “auto” by Elika Etemad (AKA fantasai)

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

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二十

justify-content values for main axis alignment

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二十

align-items values for cross axis alignment

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二十

This header was lifted directly from the specification, because I couldn't think of anything better.

If a flex container has more space along the cross axis than necessary to contain all the flex children, the flex lines stretch to fill up all the space. Flex lines, not flex children.

The property that controls this is align-content. Only multi-line flex containers will ever have free space along the cross-axis for us to do alignment stuff. Flex lines in single-line containers stretch to take up all the space.

If we don't want the default value of stretch, which sometimes cause unwanted behaviour like in this example, we can pack the flex lines and position them accordingly within the flex container (flex-start | flex-end | center). Or adjust the distribution of the flex lines within the flex container (space-around | space-between | space-evenly).

If there's one thing to take away from this talk, is that, you can only align stuff if there's extra space available in the container box.

Grid formatting context

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

Grid terminology

Box alignment properties

Property	Axis	Aligns	Applies to
`justify-content`	main/inline	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	flex-containers and grid-containers

Flexbox

align-content
justify-content
align-items
align-self

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

Grid

align-content
justify-content
align-items
align-self
justify-items
justify-self

Flexbox

align-content
justify-content
align-items
align-self

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

Grid

align-content
justify-content
align-items
align-self
justify-items
justify-self

Justify

Values	`justify-content`	`align-content`
`center`
`start`
`end`
`space-around`
`space-between`
`space-evenly`

The justify-content and align-content properties are known as content-distribution properties. And we've already seen them in action in a flex formatting context. This table is a summary of the values we've covered thus far for content distribution.

`justify/align-content`

content-distribution properties

The values that we covered for flexbox are applicable for grid as well, except that instead of flex-start, we'd use start instead.

If you do end up using any flex-prefixed values in a non-flex formatting context, the browser will resolve away the prefix. Let's just verify that works. You're free to use the start and end for flexbox though.

And now that we've sorted out the align versus justify situation, I want to bring your attention to a short-hand for setting both values in a single declaration. This short-hand uses the word “place”. So in this example, it will be place-content.

The first value sets align-content, while the second sets justify-content. If you only enter a single value, then justify-content will default to the same value as align-content.

`justify/align-self`

self-alignment properties

`justify/align-items`

defaults for justify/align-self

Overflow alignment keywords

Alignment keywords, or the values that we use in these various alignment properties, can be classified into 4 categories. We've covered distributed alignment, touched on baseline alignment, as well as gone through positional alignment.

There are also keywords for managing overflow. Let me explain. If the contents within a container are larger than the container itself, overflow occurs. That's when we get scrollbars, depending on the value of the overflow property.

But there might be instances where, an alignment mode sends part of the box out past the viewport's start edge, where you can't even scroll to get to it, like this example right here.

To exercise some semblance of control over such behaviour, we can make use of the safe and unsafe keywords. So if I set the safe keyword here, it will override the alignment mode and make it behave like start in an overflow situation. Using unsafe means the browser will respect the specified alignment mode regardless.

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

Because by default, the value of a grid item's alignment is stretch, where it fills up the entire space of the grid cell. Once an alignment is applied to the grid item's contents, it will shrink to fit its content.

Making each grid item a flex container allows us to use box alignment properties to adjust the position of the grid item's content while keeping the borders at the edge of the grid cell.

The very first time I gave this talk, I wasn't really sure how much I could talk about box alignment, but that was because I hadn't really dug into what box alignment was all about. The more I dug, the more I realised, hang on, I'd been using all these techniques without really understanding how they worked.

So I don't know about you, but this has been a great experience for me. But I do hope that you find some of the things I covered useful to you and that you enjoyed this talk as much as I enjoyed giving it.

References and resources

Thank you!

https://www.chenhuijing.com

@hj_chen

@huijing

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

Box Alignment

Where do boxes come from?

Layout of boxes

Positioning schemes

What is a formatting context?

The display property

Inner display type

Outer display type

Block formatting context

Who establishes new block formatting contexts?

We need a new BFC because...?

Inline formatting contexts

Inline box construction

Alignment along the inline-axis

Alignment along the block-axis

Explaining the inline-block centring technique

Flex formatting context

Flex axes

Flex lines

Flex directions

All the directions

Aligning with auto margins

Defining “auto” by Elika Etemad (AKA fantasai)

Aligning along the main axis

Aligning along the cross axis

Packing flex lines

Grid formatting context

Grid terminology

Box alignment properties

Flexbox

Grid

Flexbox

Grid

justify/align-content

justify/align-self

justify/align-items

Overflow alignment keywords

Bauhaus in the browser

References and resources

Thank you!

The `display` property

Aligning with `auto` margins

`justify/align-content`

`justify/align-self`

`justify/align-items`