CSS Flexbox Tutorials

📄️ align-content

align-content specify how browsers should position a flexible container's lines along the flexbox's cross-axis.

align-items specify how browsers should position a flexible container's items along the cross-axis of a flexbox.

align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.

flex is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

flex-basis sets the initial length of a flexible item.

flex-direction tells browsers the specific direction they should lay out a flexible container's direct children.

flex-flow is a shorthand for the flex-direction and flex-wrap properties.

flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.

flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.

flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.

Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.

justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.

order changes a flexible item's default layout.