Frontier Software

Layout

Alignment

As far as I undertand it, flex and grid are bandaids for these not being implemented in the default display: block yet. These are very confusing because the work differently not only in different display settings, but also if flex is set to row or column.

Flex

Froggy

Flex is a newish option for the CSS display property, and simplifies responsive design by replacing lots of historical cruft.

Something that led me down a blind ally was to mix flex with grid by splitting CSS stylesheets into breakpoints, but simply focusing on flex and treating all the legacy CSS stuff as deprecated made responsive design much easier.

In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. — Specification

There are essentially 5 flex properties:

  1. flex-direction row
  2. flex-wrap nowrap
  3. flex-basis auto
  4. flex-grow 0
  5. flex-shrink 1

The above are rarely used directly, but rather combined in these 2 shorthand properties:

Authors are encouraged to control flexibility using the flex shorthand rather than with flex-grow directly, as the shorthand correctly resets any unspecified components to accommodate common uses. — Flexibility

flex-wrap: nowrap

The default value is nowrap which seems pointless and always needs to be overwritten.

This means that if you have a set of flex items that are too wide for their container, they will overflow it. — Mastering wrapping of flex items

There’s a third option, wrap-reverse which after some frustration I discovered was the answer to solving the boss level of Flexbox Froggy.

Shuffling the order of items using flex’s row-reverse, column-reverse, wrap-reverse and order for individual items is simple, but I’m idealogically opposed to using these because they contravene Lighthouse’s Visual order on the page follows DOM order advice. Though it’s mainly concerned with form fields, generally I think shuffling elements around using CSS indicates a bad case of putting style over substance.

flex-grow: 0

The default 0 again here is dumb because that blocks the flexibility of the item to expand to fill the available space.

The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2, and the other items a value of 1 each, 2 parts of the available space will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total). Basic Concepts

flex-basis

The default is auto.

Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need. — Specification

Mind the gap

The following elements have default margins which will need to be set to margin: 0 so they don’t confuse gap.

margin top | right | bottom | left

  1. blockquote 1em 40px 1em 40px
  2. body 8px
  3. dd margin-left: 40px;
  4. dl 1em 0 1em 0 padding-left: 40px;
  5. fieldset also has padding
  6. figure 1em 40px 1em 40px
  7. h1 0.67em 0 0.67em 0 font-size 2em
  8. h2 0.83em 0 0.83em 0 font-size 1.5em
  9. h3 1em 0 1em 0 font-size 1.17em
  10. h4 1.33em 0 1.33em 0 font-size 1em
  11. h5 1.67em 0 1.67em 0 font-size 0.83em
  12. h6 2.33em 0 2.33em 0 font-size 0.67em
  13. hr
  14. menu 1em 0 1em 0 padding-left: 40px;
  15. ol 1em 0 1em 0 padding-left: 40px;
  16. p 1em 0 1em 0
  17. pre 1em 0
  18. ul 1em 0 1em 0 padding-left: 40px;

There is also display: inline-flex to mimic display: inline which is rarely used.

justify-content

In flex, justify-item and justify-self can be ignored.

In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?

A mistake I made was to use text-align, worse yet overwriting an earlier justify-content.

justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly (not defined in the Flexbox specification)

align-items stretch

This should only be used in parent containers with multiple items.

align-self can be used on individual items.

padding vs margin

https://www.youtube.com/watch?v=EhbZGV2dqZ4

margin

https://www.youtube.com/watch?v=Azfj1efPAH0

Centering

Grid

horizontally, justify-*

justify-items

justify-content

justify-self

vertically, align-*

align-* works differently in flex and grid

align-items

align-content

align-self

These only work within flex boxes.

.container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

right justify

.container {
  display: flex;
  margin-left: auto;
}

Grid

CSS-Tricks Guide

Grid Container

The element on which display: grid is applied.

I’ve picked body.

body {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

Grid Tracks

Grid Items

The children (i.e. direct descendants) of the grid container.

Mine are header, section, article and footer.

header {
  display: block;
  grid-row: 1;
  grid-column: 1 / span 2;
}

section {
  display: block;
  grid-row: 2;
  grid-column: 1;
}

article {
  display: block;
  grid-row: 2;
  grid-column: 2;
}

footer {
  display: block;
  grid-row: 3;
  grid-column: 1 / span 2;
}

Positioning items against lines

Line-positioning shorthands

Gutters

Flexbox