02_flexbox
dz / mdn / css / 3_css_layout / 02_flexboxSummary
Flexbox
Node Tree
- flexbox
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 |