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
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
Last updated