02_flexbox

dz / mdn / css / 3_css_layout / 02_flexbox

Summary

Flexbox

Node Tree

• flexbox
  • flex_container
    • flex_items
      • stretch
      • ordering_flex_items
        • higher_vals_display_later
          • if_order_val_same_source_order
        • if_order_val_same_source_order
        • order
          • higher_vals_display_later
            • if_order_val_same_source_order
          • neg_vals_appear_before_zero
  • flex_model
    • flex_container
      • flex_items
        • stretch
        • ordering_flex_items
          • higher_vals_display_later
            • if_order_val_same_source_order
          • if_order_val_same_source_order
          • order
            • higher_vals_display_later
              • if_order_val_same_source_order
            • neg_vals_appear_before_zero
    • flex_items
      • stretch
      • ordering_flex_items
        • higher_vals_display_later
          • if_order_val_same_source_order
        • if_order_val_same_source_order
        • order
          • higher_vals_display_later
            • if_order_val_same_source_order
          • neg_vals_appear_before_zero
    • flex_items_axes
      • cross_axis
        • stretch
        • center
        • cross_start_end
        • flex_start_end
          • flex_start_end_justify
      • main_axis
        • space_around
          • space_between
        • cross_axis
          • stretch
          • center
          • cross_start_end
          • flex_start_end
            • flex_start_end_justify
        • flex_start_end_justify
        • justify_content
          • space_around
            • space_between
          • space_between
        • main_start_end
          • cross_start_end
  • flex_shrink_to_fit_space
  • horiz_vert_align
    • align_items
      • stretch
      • center
      • flex_start_end
        • flex_start_end_justify
    • justify_content
      • space_around
        • space_between
      • space_between
  • nested_flex_boxes
    • flex_item_can_be_container
    • nth_of_type
  • one_dim_layout

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