Flexbox fundamentals learning path

One-dimensional layout concept of flexbox

Flexbox is a one-dimensional CSS layout model used to arrange items in either a row or a column. By setting an element’s display to flex, that element becomes a flex container and its direct children become flex items. Flex items then lay out along two conceptual axes (main axis and cross axis), and they can expand to fill available space or shrink to fit smaller spaces, making flexbox well-suited for responsive, flexible UI layouts. The flexbox model is controlled with properties such as flex-direction (to choose row vs column, including reverse directions), flex-wrap (to allow items to wrap onto new lines/columns when they overflow), and flex (to control flexible sizing using proportions and optional minimum sizes). Alignment and distribution are handled with align-items (cross-axis alignment) and justify-content (main-axis positioning), while order lets you change the visual order of flex items without changing their source order. Flexbox can also be nested, allowing a flex item to become a flex container for more complex layouts.

0/2 modes complete

Flex container and flex item terminology

0/2 modes complete