1.6: Glossary

1.6 GLOSSARY

FLEXBOX	GRID
cross-axis (vertical)	block/column axis (vertical)
main-axis (horizontal)	inline/row axis (horizontal)
flex-direction	grid-lines
flex-wrap	grid-cell
flex-flow	grid-track
justify-content	grid-container
align-items	grid-columns
align-content	grid-rows
row/reverse	grid-area
column/column-reverse	grid-template-columns
no-wrap	grid-template-rows
wrap/wrap/reverse	grid-template-areas
flex-start (justify)	justify-items
flex-end (justify, align)	justify-self
center (justify, align)	align-items
space-between (justify)	align-self
space-around (justify)	min-max
flex-start-cross (align)	space-around
baseline (align)	space-between
stretch (align)
align-self
flex-shrink
flex-basis
flex-grow

FLEXBOX

flex-direction:

• *row(default): left to right (in left-to-right); right to left (in right-to-left)

• row-reverse: right to left in left-to-right; left to right in right-to-left

• column: same as row but top to bottom

• column-reverse: bottom to top

flex-wrap:

• *no-wrap(default): all items will be on 1 line

• wrap: items will wrap onto multiple lines, top to bottom

• wrap-reverse: wrap from bottom to top

justify-content:

alignment along main-axis - distributes extra fee space when either flex items are inflexible or are flexible but have reached their max size. Also, exerts some control over the alignment of items when they overflow the line.

• *flex-start(default) items packed to(adjacent?abuts?) start line

• flex-end: toward end line

• center: centered along line

• space-between: even distribution in line; first item on start line, last item on end line

• space-around: evenly distributed with equal space around (items are not visually equal. Note: 1st item will have 1 unit(?)of space against the start line but 2 units between next item)

  *space-evenly: distributed between 2 items and space to edges is equal

align-items:

(think justify-content for cross-axis(perpendicular to main axis)

• flex-start-cross: start margin edge of item is placed on cross-start line

• flex-end: item edge against cross-line end

• center: items centered across cross-axis

• baseline: item baselines are aligned

• *stretch(default): stretch to fill container(still respecting min/max-width)

align-content:

aligns container lines within when there is extra space in the cross-axis(similar to justify-content aligns individual items within the main axis)

flex-grow:

accepts unitless value that serves as a proportion. dictates what amount of available space inside flex-container item should take up. ex. if set to 1, every child will set to an equal size inside container. if one child has grow value of 2 it will take up twice as much space as the other children,

flex-shrink:

determines how much flex-item will shrink relative to rest of items in the container when there isn't enough space on the row. default is 1 (and is multiplied by the flex basis when distributing negative space.

syntax: flex-shrink(grow): <number>

.flex-item{

flex-shrink(grow): 2;

}

flex-basis

flex-basis: <width>/.flex-item{

flex-basis: 100px; } specifies the initial size of the flex item BEFORE any available space is distributed according to flex-factors. default value is 0. value of auto sizes the element to property(which can itself be the keyword auto, which sizes element based on its contents.)(for any width value negative lengths are invalid)

Shorthand flex: 1 1 20em (sh for f-grow: 1. f-shrink: 1, f-basis: 20em). flex: 2 2 20em. both want to be 20em wideBoth flex items want to be 20em wide. Because of the flex-grow (first parameter), if the flex container is larger than 40em, the 2nd child will take twice as much leftover space as the first child. But if the parent element is less than 40em wide, then the 2nd child wi

NOTE Flexboxes require vendor prefixes (see: scss) run through css-tricks Autoprefixer

GRIDS

Grids: can layer items, explicitly state where an element sits on the grid and even mix items with explicit positioning with those that will layout according to Grid's auto-placement algorithm. Great value in using sub-grids within grids. declare elements on the grid as sub grid.

grid-lines - lines that make up the grid, horz. or vert., referred to by name or number

grid-track - space between 2 grid lines. Hor or vert.

grid-cell - space between 4 grid lines. Smallest unit on grid that can hold items (like cells in a table)

grid-area - on the grid, bound by 4 grid lines containing any number of cells

nested-grid - a grid inside another grid box