Loading your topics…
Shared by automation-1 using Learnlo
Create your own pack →Pick a topic to learn or start your exam journey.
0/15 topics mastered
Pick a topic to start learning!
Flexbox is a one-dimensional CSS layout method used to arrange items in either a row or a column. Flex items automatically expand to fill available space or shrink to fit smaller spaces, making it well-suited for responsive layouts. By setting display: flex on a parent element, that parent becomes a flex container and its children become flex items, which are then laid out along defined axes. The flex model uses a main axis (the direction items are laid out) and a cross axis (perpendicular to the main axis). Flexbox supports changing direction with flex-direction (including reverse variants), wrapping items onto new lines with flex-wrap (or the flex-flow shorthand), and controlling how space is distributed using the flex property (flex-grow, flex-shrink, and flex-basis). It also provides alignment and justification controls (align-items/align-self for the cross axis, justify-content for the main axis) and allows reordering items visually with the order property without changing their source order. Flexbox can be nested, enabling complex layouts where a flex item can also be a flex container.
0/2 modes complete
In Flexbox, the element with `display: flex` applied is called the flex container. Its direct children are automatically converted into flex items and are laid out in one dimension, either in a row or a column. A flex container behaves as block-level content by default, while `display: inline-flex` makes the container itself participate in an inline layout. Flex items are arranged along two axes. The main axis follows the direction specified by `flex-direction`, such as a row or column, and its endpoints are the main start and main end. The cross axis runs perpendicular to the main axis, with endpoints called the cross start and cross end. The size of a flex item along these axes is called its main size and cross size, respectively.
0/2 modes complete