Glossary
Anonymous flex item
A box in the box tree whose children are one or more text runs. Flex items must be boxes, so text gets wrapped in this new box. Called anonymous because you can’t select it with CSS. Uses the initial values of all CSS properties that can’t be inherited.
Aspect ratio
The ratio between the width and height that a box wants to maintain. Elements like img generate boxes with a natural aspect ratio based on the image file. All boxes can set it with apect-ratio.
Auto margin
A margin with the value auto. Once flex items are done sizing, growing, shrinking, and stretching. Grabs all unused space in a flex line before any alignment is applied. Visually pushes away the visible part of a flex item.
Block direction
The direction in which blocks of text and other content stack. By default, top to bottom.
Block-level box in Flow layout
When laid out with Flow layout, a box in the box tree that wants to occupy its own chunk of space instead of being laid out in a line with other boxes and text runs.
Border
The area of a box surrounding the padding box. It forms the border box. Sizing properties like inline-size size this area if you set box-sizing to border-box.
Box
A concept used in CSS for showing content on the page. A box is built up of smaller boxes, also called areas, for margin, border, padding, and content. Boxes exist in the box tree. Elements in the DOM tree generate boxes depending on the value of display.
Box tree
A representation of boxes and text runs displayed on the page. All types of layout (Flow, Flexbox, Grid) calculate the size and position of things in the box tree. Boxes are generated by DOM tree elements, and text runs are generated by DOM tree text nodes.
Column
A block of text and other content. In Flexbox, represents the direction in which lines of text stack in a column. By default that’s top to bottom, because written text goes from left to right and lines of text go from top to bottom.
Computed value
A value a property has after the browser takes into consideration all style sheets, style attributes, inheritance, and so on. Each box and text run in the box tree have a computed value for every single CSS property when layout starts.
Content
A generic term used to describe the descendants of an element in the DOM tree, or a box in the box tree.
Content box
The innermost area of a box. If the box has children in the box tree, they are commonly displayed inside this area. The initial value of box-sizing is content-box, so inline-size or width will size this area. The other value is border-box.
Cross direction
The direction in which flex lines stack. Once the flex container sets the main direction, this is then the “other direction” perpendicular to the main direction. Can be reversed with : wrap-reverse.
CSS
Stands for Cascading Style Sheets. It’s a way of writing instructions for the browser about how content should be presented in different circumstances.
Custom CSS property
A property with a custom name and an arbitrary value. The name must be prefixed with --, like --something-nice. It’s inherited, which means it can be accessed by the DOM tree descendants of the element on which it is declared.
Direction
The direction of text in a line. By default, left to right. When writing vertically, ltr means top to bottom, and rtl means bottom to left.
DOM tree
A browser’s representation of the page being rendered. Built up with nodes of different types, mostly elements and text nodes. Initially built based on the source HTML received from a server. CSS and JavaScript select elements in this representation.
Flex base size
The size a flex item asks to be on a flex line in the main direction before shrinking or growing. Set on flex items with flex-basis. If flex-basis is auto, set with a sizing property corresponding to the main direction (inline-size or block-size).
Flex container
A box in the box tree whose children are laid out with the Flexbox layout type. Turn a box into a flex container box with display: flex or display: inline-flex.
Flex item
A box in the box tree laid out using the Flexbox layout type. A child box of a flex container box.
Flex line
A rectangle into which flex items get collected while Flexbox layout is being calculated. Dismissed and forgotten once the size and position of flex items is figured out. Doesn’t get rendered on the page, and can’t be selected with CSS in any way.
Flow layout type
The default layout type in CSS. A box can continue the Flow layout started by its ancestor. Or, it can start a new Flow layout, which resets things like the behavior of floated boxes and CSS shapes.
Gap
An amount of space inserted between flex items or flex lines by the flex container. It’s fixed in size, it doesn’t shrink or grow. Set by the flex container with the gap shorthand property, or the column-gap and row-gap properties.
Grid layout type
One of the layout types in CSS. The box tree children of a box are laid out with Grid when its display is grid or inline-grid.
Growing
A process in which flex items are offered to grow up from their flex base size. Happens when there’s unused space in the flex line in the main direction.
Hypothetical size
A size a flex item or a flex line would be if it didn’t stretch in the cross direction.
Initial value
The value each property starts with. If nobody else—the browser, the user, or you—sets a different value, then this value is used.
Inline direction
The direction in which text and other content are laid out in a row of text. By default, left to right.
Inline-level box in Flow layout
When laid out with Flow layout, a box in the box tree that wants to be part of a line with other boxes and text runs.
Layout type
The rules applied to calculate the size and position of boxes and text runs in the box tree. Each box decides what layout type should be used for its children in the box tree. Boxes can escape the chosen layout type and become “out-of-flow” with position.
Logical direction
A direction based on the direction of writing, as opposed to a physical direction. For example, inline direction could mean left to right for text written in English, and right to left for text written in Arabic. Set with writing-mode and direction.
Longhand property
A normal property as opposed to a shorthand property.
Main direction
The direction in which flex items are laid out. Set by the flex container with . The growing and shrinking of flex items happens in this direction.
Margin
The outermost area of a box surrounding the border box. It forms the margin box. Because background colors, gradients, or images aren’t displayed underneath this area, it has the effect of moving around the visible areas of the box.
Maximum size
The largest size a box agrees to be. But if the minimum size is larger than that, then the minimum size “wins”. Set for each dimension with max-inline-size and max-block-size. The default is none, meaning there’s no size limit.
Minimum size
The smallest size a box agrees to be. Set for each dimension with min-inline-size and min-block-size. In Flexbox, the default auto is a “reasonable” content-based size in the main direction, and 0 in the cross direction.
Padding
The area of a box surrounding the content box. It forms the padding box.
position
A property which sets whether a box or text run wants to be laid out with the standard rules of each layout type, or whether it wants to escape them. A box can escape with a position of absolute or fixed. Such a box is then not a flex item.
Pseudo-element
An abstract element representing something or part of something in the box tree. Not part of the DOM tree, but has an originating element and can be styled through it, like: div::before. ::before and ::after can generate boxes and be flex items.
Row
A line of text and other content. In Flexbox, represents the direction in which text goes in a row of text. By default that’s left to right, because written text goes from left to right in a line of text.
Shorthand property
A single property that sets multiple other properties at once. For example, gap: 20px sets column-gap: 20px and row-gap: 20px.
Shrinking
A process in which flex items are asked to shrink from their flex base size when they overflow their flex line in the main direction. Set on each flex item with flex-shrink. A value above 0 means the flex item agrees to shrink. The initial value is 1.
Stretching
When flex items and flex lines increase their size in the cross direction. Set on each flex item with align-self. If a flex item has align-self: auto, it will use the flex container’s value. The flex container stretches flex lines with . Stretching happens when the value’s normal or stretch.
Viewport
A rectangle in which the page gets rendered. It’s like a window through which you can see the page. If the page is bigger than the viewport, you can scroll the page so that it’s visible in the viewport.
Used value
The value a property has after layout is calculated. For example, a property could have a computed value of 100%, which can’t be turned into a pixel length until layout starts. But once it’s done, the property might have a used value of, say, 800px.
Writing mode
A characteristic defining the direction of text in a line, and the direction in which blocks of text stack. Set with writing-mode and direction. By default, text goes horizontally from left to right, and blocks stack from top to bottom.