mdn/css/3_css_layout/02_flexbox

02_flexbox

dz / mdn / css / 3_css_layout / 02_flexbox

Summary

Flexbox

Node Tree

Nodes

flexbox
content Flexbox
children flex_container, flex_model, flex_shrink_to_fit_space, horiz_vert_align, nested_flex_boxes, one_dim_layout (description)

one_dim_layout
content One-dimensional layout method for arranging items in rows or columns
parents flexbox

flex_shrink_to_fit_space
content Items flex (expand) or shrink to fit space
parents flexbox

flex_container
content Flex container
children flex_items
parents flex_model, flexbox

flex_items
content Flex Items
children stretch (stretches all flex items), ordering_flex_items
parents flex_model, flex_container

flex_model
content The Flex Model
children flex_container, flex_items, flex_items_axes
parents flexbox

flex_items_axes
content Flex items laid out on 2 axes: main and cross
children cross_axis, main_axis
parents flex_model

main_axis
content Main Axis: direction flex items are laid out in.
children space_around (distributes all items evenly along main axis with bit of space at ends), cross_axis (perpendicular), flex_start_end_justify (align all items at start/end of main axis), justify_content (controls where items sit on main axis), main_start_end
parents flex_items_axes

cross_axis
content Cross Axis: perpendicular to main axis
children stretch (stretches in direction of cross axis), center (centered along cross axis), cross_start_end, flex_start_end (aligns all items at start/end of cross axis)
parents main_axis, flex_items_axes

main_start_end
content Main start/end
children cross_start_end (related)
parents main_axis

cross_start_end
content Cross start/end
parents main_start_end, cross_axis

horiz_vert_align
content Horizontal and vertical alignment
children align_items, justify_content
parents flexbox

align_items
content align-items
children stretch, center, flex_start_end
parents horiz_vert_align

stretch
content stretch (default): stretches all flex items to fill parent in direction of cross axis
parents cross_axis, flex_items, align_items

center
content center: maintain instrinic dimensions, centered along cross axis
parents cross_axis, align_items

flex_start_end
content flex-start/flex-end: align all items at start/end of cross axis
children flex_start_end_justify (flex-start/end used for justify-content instead of align-items)
parents cross_axis, align_items

justify_content
content justify-content: controls where items sit on main axis
children space_around, space_between
parents main_axis, horiz_vert_align

flex_start_end_justify
content flex-start/flex-end: align all items at start/end of main axis.
parents main_axis, flex_start_end

space_around
content space-around: distributes all items evenly along main axis with a bit of space at either end
children space_between (similar, but doesn't leave space at ends)
parents main_axis, justify_content

space_between
content space-between: like space around, but doesn't leave space at either end
parents space_around, justify_content

ordering_flex_items
content Ordering Flex Items
children higher_vals_display_later, if_order_val_same_source_order, order
parents flex_items

higher_vals_display_later
content Higher order values display later
children if_order_val_same_source_order
parents order, ordering_flex_items

order
content order property (default: 0)
children higher_vals_display_later, neg_vals_appear_before_zero
parents ordering_flex_items

if_order_val_same_source_order
content Use source order if two items have the same order value
parents higher_vals_display_later, ordering_flex_items

neg_vals_appear_before_zero
content Negative values appear before zero
parents order

nested_flex_boxes
content nested flex boxes
children flex_item_can_be_container, nth_of_type
parents flexbox

flex_item_can_be_container
content A flex item can be a flex container
parents nested_flex_boxes

nth_of_type
content nth-of-type
parents nested_flex_boxes