This simple Flexbox Cheat Sheet offers a visual and textual guide to mastering Flexbox layout in CSS. It covers key properties for both Flexbox containers and items, including display settings to initiate a flex context, flex-direction for item orientation, and alignment controls such as justify-content and align-items for precise positioning. The cheat sheet also explores individual item properties like order, flex-grow, and align-self, providing clear examples and illustrations to demonstrate how these properties affect layout and design.
Flexbox Container
Display
Turns an element into a flex container, defining its children as flex items.
display: flex: Creates a block-level flex container.
display: inline-flex: Creates an inline-level flex container.
Flex Direction
Controls the orientation of flex items within the container.
flex-direction: row: Items are laid out in a horizontal direction.
flex-direction: row-reverse: Items are laid out horizontally in reverse order.
flex-direction: column: Items are laid out vertically.
flex-direction: column-reverse: Items are laid out vertically in reverse order.
Flex Wrap
Determines whether flex items are forced onto one line or can wrap onto multiple lines.
flex-wrap: nowrap: All items are fitted on one line.
flex-wrap: wrap: Items will wrap onto multiple lines from top to bottom.
flex-wrap: wrap-reverse: Items will wrap onto multiple lines from bottom to top.
Justify Content
Aligns flex items along the main axis, offering fine control over their positioning.
justify-content: flex-start: Items align at the start of the container.
justify-content: flex-end: Items align at the end of the container.
justify-content: center: Items center along the main axis.
justify-content: space-between: Items are evenly spaced; first item is at the start, last item at the end.
justify-content: space-around: Items are evenly spaced with equal space around them.
justify-content: space-evenly: Items are evenly distributed with equal space between them.
Align Items
Aligns flex items along the cross axis, useful for aligning items vertically within a container.
align-items: flex-start: Items align at the start of the container's cross axis.
align-items: flex-end: Items align at the end of the cross axis.
align-items: center: Items center along the cross axis.
align-items: baseline: Items are aligned based on their baseline.
align-items: stretch: Items stretch to fill the container (default behavior).
Align Content
Adjusts the alignment of flex lines in multi-line flex containers, similar to justify-content but for the cross axis.
align-content: flex-start: Lines packed to the start of the container.
align-content: flex-end: Lines packed to the end of the container.
align-content: center: Lines centered in the container.
align-content: space-between: Lines evenly distributed; first line is at the start, last line at the end.
align-content: space-around: Lines evenly distributed with equal space around each line.
align-content: stretch: Lines stretch to take up the remaining space.
Flexbox Children
Intro
Properties applied to flex items, offering individual control over their flex behavior and alignment.
Order
Changes the order of flex items without affecting the source code.
order: 1: Moves an item to a different position.
Flex Grow
Defines the ability of a flex item to grow if necessary.
flex-grow: 1: Allows an item to grow to fill available space.
Flex Basis
Sets the initial main size of a flex item.
flex-basis: 50%: Specifies the starting size before additional space is distributed.
Flex Shrink
Defines the ability of a flex item to shrink if necessary.
flex-shrink: 1: Allows an item to shrink if there isn't enough space.
Align Self
Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
align-self: flex-start|flex-end|center|baseline|stretch: Overrides the container's align-items value for the specific item.