DEV Community: Paul Thompson

Default flexbox - what does display flex do?

Paul Thompson — Sat, 03 Sep 2022 20:16:07 +0000

An exploration into the initial/default values of flexbox and their effects.

What is `display: flex`?

.container  {
  display:  flex;
}

display: flex is a CSS display declaration, which enables flexbox (the Flexible Box Layout Module).

With flexbox enabled:

The selected element becomes a flex container
Its child contents become flex items
It will algorithmically layout its contents

To the uninitiated, this can be a little surprising and confusing at first. So let's get a better understanding of flexbox and its default settings.

Flexbox overview

Flexbox is a layout system, which assumes the responsibility of arranging, aligning and flexibly sizing flex items within its flex containers.

It's a line-based system, meaning it will arrange and align its contents along a single-line, which can be wrapped.

This single breakable line can appear horizontally like in rows, or vertically like in columns, but it cannot be both at the same time.

Flexbox is a one dimensional layout system

Flexbox is also writing mode aware.

This means it will automatically arrange its flex items in the same orientations and directions as text flows in the document.

Writing mode

The writing mode details how text/content flows within its documents or components. Its purpose, is to internationalize writing on the web.

It determines:

inline direction:
The direction a line of text flows in
block flow direction:
The direction new lines of text are added
inline base direction:
The primary direction content (text and other elements) flows within the line

Browser default writing mode - `horizontal-tb`

By default, the browser will arrange lines of text in horizontal rows.
New lines of text are added vertically, in a top-to-bottom direction (tb) .

Within each line, text flows from left-to-right (ltr)

Layout axes and default directions

Layout in flexbox consists of two axes, which determine how content is arranged and aligned.

By default, the document's writing mode will determine how these axes are organised:

Main axis

The main axis is the primary axis of flexbox
Flex items are arranged in a single direction along this axis
Its default orientation will follow the inline direction of the document's writing‑mode (horizontal)

Cross axis

The cross axis runs perpendicular (or 90 degrees) to the main axis (it "crosses" the main axis)
This axis is used to align content in relation to the main axis
Its default orientation and direction will follow the block flow direction of the document's writing‑mode (tb)

Flex items will flow in the same directions as the document's flow of text (left-to-right, top-to-bottom).

Default axes and writing mode

Note:
The orientation and direction of flexbox axes can be overridden. The main axis can appear horizontal or vertical, regardless of the inline axis direction.

A deep dive into `display: flex`

When we create a flex container, we set two display types or contexts:

an Outer display type
for the flex container
an Inner display type
for its flex-items

Outer display type

When declaring flex, the outer display type of the flex container is set to block.

For layout, this means:

the selected element's width expands to fit its parent container or to its own set width
its vertical height is equal to that of its contents
overflow applies to the container

Note:
Setting display: inline-flex will create a flex container, which acts like an inline-element in normal document flow
e.g. a flex container inline with text

Inner display type

Within the flex container, its child contents become 'flex items'.

Child contents such as:

HTML elements
- e.g. div, li, img, span,input,table etc
Pseudo elements
- i.e. ::before, ::after
Non-empty text nodes
- i.e. a continuous string of text, other than whitespace, without a containing element, such as "lorem ipsum"
- String content will be wrapped in an anonymous flex-item wrapper and ⚠ cannot be directly styled with CSS due to being anonymous.

However, not all child items become flex-items:-

Absolutely-positioned child elements

Elements that are absolutely positioned with CSS (e.g. position: absolute) are not flex items, as they are taken out of document flow

Note:
Flex items can also be set as flex containers.
The item will act as both:

a flex item to its parent container
a flex container to its contents

Flex formatting context

Flex items participate in a flex formatting context.

This participation is regardless of the flex item's initial display type. The flex items will instead act "like blocks".

However, there are differences in block and flex formatting contexts.

Within a flex container:

float and clear do not apply to flex items
vertical-align has no effect on flex items
margin collapsing is not a feature of flex formatting contexts
first formatting pseudo elements do not apply
(::first-line, ::first-letter)

Default flexbox layout

Declaring flex on a parent element, will typically result in one of the following layouts:

content in a row with free space

content in a row with no free space

content in a row overflowing its container

In all scenarios, we see:

a single row of flex items
equal height flex items within this row

This is because flexbox was optimized for user interfaces and common interface designs call for a row of equal height elements/columns.

In the past, this default layout was difficult to produce and developers often resorted to workarounds and hacks, such as:

Floated faux columns
CSS table styling
Set column heights

Thankfully, we can now achieve this with a single style declaration:
display: flex

Default flexbox properties and values

When a flex container is created with display: flex; the following initial browser styles will take effect:

For the flex container:

flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;

For its flex items:

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
order: 0;

Flexbox terminology

To help describe the behaviour of flexbox, let's take a detour and introduce some more terminology:

Main-size - The size of the flex item/container along the main axis/dimension.

Cross-size - The size of the flex item/container along the cross axis/dimension.

Flex base size (or base size) - The content box size of the flex item, before it resizes (grows or shrinks).

Hypothetical main size - The flex base size clamped by min/max values (such as min-width,max-width).

Inner size - The content box size of an element.

Outer size - The margin box size of an element.
The margin box includes the content, padding, borders and margins of an element.

Flex container - default arrangement

What properties and values define how flex items are arranged in the container.

Main axis orientation

flex-direction: row;

The flex-direction property sets the orientation of the main-axis.

In default layout, the main-axis will match the orientation of the writing mode's inline axis, which is horizontal.

Flex items are arranged horizontally in a row

If the writing mode was vertical (such as in Chinese or Japanese)
the flex-direction: row would run vertically, following the inline axis.

Cross axis orientation

The cross-axis runs perpendicular to the main axis.

In default layout, the cross axis runs vertically from top to bottom in the block flow direction.

Main axis direction

By default, the main axis direction matches the inline base direction of the document.

The main-start and main-end directions are equivalent to the inline-start and inline-end of the inline axis.

Flex items are arranged from left-to-right (ltr).

Single flex line

Initially flex items are laid out in a single line along the main axis of the flex container.

This line of flexbox content is called a flex line.

Flex items do not automatically wrap onto new flex lines.

This is due to the default setting:
flex-wrap: nowrap;

If there is not enough space within the flex container, the contents will overflow.

Flex container - default alignment

What properties and values define how flex items are aligned in the container.

Main axis alignment

justify-content: flex-start;

Initially, flex items will align to the main-start of the main axis.

In default layout, the main-start is equivalent to the inline-start of the inline axis.

Flex items are aligned as a group to the left side of the container.

Cross axis alignment

align-items: stretch;

By default, flex items will "stretch" to fill the flex container's cross size, aligning to its cross-start and its cross-end.

The flex items will stretch vertically from top-to-bottom, following the block flow direction of the writing mode.

Flex items with the same cross size will appear equal height.

The cross size of a flex container is determined by either of the following:

The flex-item with the largest cross size
The set cross size of the flex container

Cross size determined by flex item

By default, the flex container will expand to fit its largest flex item. If the flex container contains other flex items, the smaller flex items will be stretched to fit the flex container.

This results in all flex items having equal cross sizes/heights.

Cross size determined by container

If the flex container has a set cross size (such as a set height), each smaller flex item will be stretched to fit the flex container's cross size.

This results in all flex items having equal cross sizes/heights.

Overflow (cross axis)
If there is a shortage of free space in the cross dimension, flex items may overflow their flex container.

How do flex items stretch?
When a flex item is “stretched”, its outer margin edge will become flush with the cross-start and cross-end of the flex container's content box. This results in a larger content box cross size for the flex item.

If the margin box of the flex item has no value, then its margin edge will be flush against whichever of the flex item's box model has a value. Falling back in the following order: margin > border > padding > content

Exceptions to flex item stretch

Height
If a flex item has a set height, then the item will not be be stretched. The item will be sized in the cross axis to this height and will be aligned to the cross-start of the flex container.

Min/max-height
If a min/max-height value is set, the flex item will be stretched, however, its cross size will be limited by these values.

Auto margins
e.g. margin-top: auto
If a flex item has an auto margin in the cross axis, then this margin will take the positive free space for itself, preventing the item stretching. The margin will push the flex item's box content away from the cross edge.

If the flex item has auto margins set on both cross sides and free space is available, this will center the flex item within the cross axis. The free space is equally shared by the margins.

Flex item - default ordering

order: 0;

By default, flex items will display in their source document order following the main axis direction from left-to-right.

This default order can be overridden by specifying an integer value for the flex item. Items with an order greater than zero will display after items with a smaller order value.

Flex item - default sizing

What properties and values define how flex items are sized within the container.

The default flex item sizing properties, relate to three sizing questions:

flex-grow - can the flex item grow, if there is space available?
flex-shrink - can the flex item shrink, if there is a shortage of space?
flex-basis - what is the flex item's initial size, before any resizing occurs?

The application of these properties are dependent upon:

the content size of the flex items
the available free space within the flex container

Flex item growth

flex-grow: 0;

By default, flex items do not grow beyond their initial content-size.

The flex items have a growth factor/value of 0.

If there is positive free space available within the flex container, the flex items are inflexible.

Flex item shrinkage

flex-shrink: 1;

flex items are allowed to shrink by default.

This is because each flex item has a shrink-factor of 1.

Shrinking happens when the summed flex items are larger than the flex container, resulting in negative free space (a shortage of space).

Flexbox will distribute this negative free space when applying the flex-shrink factor to its flex items.

As each flex item has the same flex-shrink value, you would think each flex item would shrink by the same amount, but this is not the case.

The flex shrink factor determines the items shrink rate and should not to be confused with the shrink amount.

The amount each item shrinks depends upon its base size (content) and its shrink factor.

As seen in Section 7.1 of the specification:

Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.

The larger flex items will proportionally shrink more than their smaller siblings. This means that when large items are present, the smaller items are less likely to shrink to a tiny unreasonable size.

For example:

Furthermore, default flex items will not shrink below their smallest content size (min-content).

The min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word.
-- mdn web docs

For replaced elements, such as img, video or input:
the min-content size is the natural/intrinsic size of the element or the browser set default size (unless overridden by CSS).

Overflow (main axis)
If there is a shortage of free space in the main dimension, flex items may overflow the flex container.

Flex item initial size

flex-basis: auto;

flex-basis relates to the flex item's initial main size, before any growth or shrinking is applied.

The default auto value, is equal to the max-content size of the flex item.

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows.
-- mdn web docs

If free space is available within the flex container, the flex item will appear as big its contents and will not grow beyond this.

Default layout - Resolving flexible lengths

How and when should flex items grow or shrink?

Please note:
The following is an oversimplification of the flexbox sizing algorithm and concerns default layout only.

1. Determine the used flex factor

When sizing flex items, flexbox determines whether the flex container has positive or negative free space.

Flexbox does this by summing the flex items outer hypothetical main sizes and compares this sum against the inner main size of the flex container.

If the sum is less than the flex container's, then there is positive free space, otherwise, there is negative free space.

if there is positive free space
then the flex grow factor is used
if there is negative free space
then the flex shrink factor is used

2. Size inflexible items

Before flexbox applies flex grow or shrink, it first determines if any flex items are inflexible.

When there is positive free space, the flex-grow factor applies. However, flex items are inflexible in this case, as their flex grow factor is zero.

Flex items in this scenario are set to their target hypothetical main size, this is their max-content size clamped by min/max sizing.

3. Calculate the initial free space

In this step, flexbox will calculate the amount of free space available within the flex container. This free space can either be positive or negative.

Both frozen and unfrozen flex items are included in this calculation.

4. Loop and distribute free space

In default layout, if the algorithm has got to this step, it can mean one of two things regarding the space in the flex container:

if there is no free space
do nothing
if there is negative free space
apply the flex shrink factor

Applying the free shrink factor
Flexbox will distribute negative free space by calculating a target size for each flex item. The target size will take into account its content-size, shrink factor and shrinkable siblings, like so:

For each unfrozen flex item:

Calculate its scaled flex shrink factor
flex-shrink factor 1 multiplied by its inner base size
Calculate its shrink ratio
its scaled shrink factor / sum of the scaled flex shrink factors of all unfrozen items on the line
Reduce the flex item by a fraction of the absolute negative free space proportional to its shrink ratio
item base size - (abs. negative free space multiplied by its shrink ratio)

worked example of default flex shrink

In this example, we'll focus on the first flex item and the the application of flex-shrink: 1;

The flex container has negative free space: -400px

600px - (100px + 200px + 300px + 400px) = -400px
This is the flex container's main size minus the total main size of the flex items.

When expressed as an absolute number, the negative free space is: 400px

The first flex item in the row has a base size of: 100px

Its scaled flex factor is: 100
100 * 1 = 100
Its shrink ratio is: 0.1
100 / (100 * 1, 200 * 1, 300 * 1, 400 * 1) = 0.1
Its target flex item size is: 60px
100px - (400 * 0.1) = 60px

Its shrink amount is: -40px
-400 * 0.1 = -40px

Alternatively, the flexbox algorithm will exit this loop, when there is no remaining free space left to distribute.

Once the loop is complete, the used main size is set to the target main size, its final size.

Summary

Often CSS can be tricky when we don't fully understand how it works.

Assuming that the web page is written in English, we can assume that display: flex will most likely create:

a block styled flex container
a single row of flex items
left-to-right ordered flex items
equal height flex items
max-content sized flex items unless shrunk
min-content sized flex items when shrunk
content overflow if the flex container is smaller than the final size of its flex items

If it doesn't, we can check for possible causes:

a default flexbox value may have been overridden
(e.g. flex: 1, flex-direction: column)
additional layout values may have been set
(e.g. height, width)
the document may have a different writing mode
(e.g. veritical-rl)

Its also worth remembering that not all flex items are flexible, and that flex item sizing is based upon the flex item's content, unless overridden.

What is the DOM?

Paul Thompson — Mon, 16 May 2022 21:46:14 +0000

The DOM stands for Document Object Model, which is an interface that represents the contents of a HTML or XML document.

This interface is a collection of objects, actions, attributes and relationships, which is collectively is known as an Object Model.

The DOM provides developers with a language-independent application programming interface to access and manipulate the document.

Documents as a result can be as dynamic as web app or as static as a read-only page

For the rest of this article, I will be discussing the DOM in relation to HTML documents (web pages) which are accessed in web browsers, such as Chrome, Safari, Edge or Firefox.

How is the DOM created?

The browser first needs to process the document, in order to use it.

Before a web browser can display or use a HTML document, it needs to create the DOM. It does this by downloading and processing the document, creating the resulting object model in its memory.

Various processes need to take place, in order to create the DOM:

Bytes > Conversion > Tokenizing > Lexing > DOM construction

Bytes:- the browser reads the document in a stream of bytes, via packets sent across the internet or retrieved from local disk.
Conversion:- these bytes are then converted into characters based upon the encoding specified in the document (usually UTF-8).
Tokenizing:- the characters are then pattern matched into tokens as defined by the HTML specification, such as <body>,<div>
Lexing:- the tokens are then converted into "objects", which define their properties and rules.
DOM construction:- finally the relationships of these objects are built into a tree-like structure (a parse tree) as defined by the HTML document.
- The entire document is represented by a document node.
- The <html> element is the root element , which represents the top-most part of the HTML document.
- All other nodes are descendants of the root element, within the DOM.

For example: the head and body element nodes are descendants of the root html node.

More than one child node creates a sibling relationship.
e.g. li's are siblings within the ul tag.

Every time the browser processes HTML, this DOM creation process runs.

Browsers are tolerant of HTML errors

During the DOM creation phase, the browser will address various issues or errors it encounters with the source HTML. This error handling results in a resilient foundation for our web page/app content.

Features of the DOM

The document object model covers:

Interfaces and objects used to manipulate the document
The meaning of these interfaces and objects, including attributes and behaviour
The relationships and collaborations among the interfaces and objects

Logical structure

The DOM closely represents the document's structure via nodes and links, whereby:

HTML elements, attributes, text etc are represented by nodes (a basic unit in a data structure)
- (Each node contains objects)
Links or pointers are used between nodes, which represent the nodes hierarchical relationships to each other

Tree structure

The logical structure is generally thought of as a tree-like structure, so you may encounter terms such as 'document tree' and 'DOM tree' when describing the document's structure or hierarchy. This tree-like structure, is not a DOM specification or implementation requirement, however, it is a generally understood mental model to have for HTML documents.

Properties and methods

The object model provides properties and methods, which allow developers to find, access and interact with the document's contents

Properties are values of objects (typically HTML elements) which you can return or change, such as classList, innerHTML, innerText etc.
Methods are actions related to DOM objects, such as querySelector(), createElement(), addEventListener() etc

Properties and methods vary depending upon the node type in the DOM.

Representative types/objects

The object model can represent the HTML document in various ways. How a document part is represented, will determine how it can be interacted with (i.e. what properties and methods it has).

Node type

Every node in the DOM has a node type.
There are 12 node types in total but some node types have been deprecated. The integer (number) value represents the type of the node.

Notable node types include:

ELEMENT_NODE (1)
- Which represent HTML tags such as div,body,p
TEXT_NODE (3)
- The text/string value between HTML tags
COMMENT_NODE (8)
- The comment value in the HTML
DOCUMENT_NODE (9)
- This represents the entire document in the tree structure

Attribute values
Values such as id,class href are technically not part of the DOM tree.

since they are not actually child nodes of the element they describe, the DOM does not consider them part of the document tree.
...
The DOM takes the view that attributes are properties of elements rather than having a separate identity from the elements they are associated with

Source: Document Object Model (DOM) Level 3 Core Specification - Interface _Attr

Attribute objects inherit the node interface and have a node type: ATTRIBUTE_NODE (2)

Collections

Depending upon DOM selection method used and the node(s) selected, the returned value could be a collection of elements/nodes rather than a single element or node.

Nodelists

Nodelists are collections of nodes, which are array-like in nature. Nodelists may be looped over using forEach when interacting with the DOM.
Nodelists can contain text and attributes nodes.

HTMLCollection

HTMLCollections are collections of elements (tags) unlike Nodelists, which can contain all node types. Like NodeLists, HTMLcollections are array-like.

HTMLCollection is a historical interface returned by the older DOM selection methods
getElementsByTagName()
getElementsByClassName()

Collection values can be either live or static:

Live values update when the DOM updates
Static values are obtained only when DOM selection is executed, they are unaffected by future updates to the DOM

Note
Both NodeLists and HTMLcollections can be converted to JavaScript arrays, granting developers greater flexibility in data manipulation (with methods unavailable in these array-like data structures).

DOM interface / Web APIs

Although the DOM is cross-platform and language independent, it's typically manipulated with JavaScript in the browser.

When working with the DOM in JavaScript, expressions are imperatively structured.
This means we are telling the browser exactly what to do, such as: select a DOM node and perform an action on that selection.

This can be done directly on the DOM selection:
e.g.

document.getElementById("heading").style.color = "blue";

or by using JavaScript variables to more effectively structure the code.

const pageTitle = document.getElementById("heading");
pageTitle.style.color = "blue";
pageTitle.style.textTransform  = "Uppercase";

The DOM API provides various properties and methods to manipulate the document, which can be grouped by type/function, such as:

Selection
Traversal (navigating between nodes)
Creating or updating content
Deleting or removing content
Styling content
Node/collection methods
Events

Declarative DOM manipulation

For many developers, direct DOM manipulation is too verbose (e.g. overly long method names) and too expensive for modern web app implementations.

Developers found their implementations would grow complexity (numerous DOM event listeners) with performance downsides of frequent DOM updates.

Developers as a result, will now often use a JavaScript framework or library instead, which takes care of this complexity for them. These tools provide the developer with a declarative interface, where they can tell the browser/program logic "what to do" instead of "how to do it".

Examples include: React, Vue, Svelte etc

In these cases, the framework/library does the DOM manipulation for the developer, usually with an intermediary step (such as a Virtual DOM or compilation).

What ISN'T the DOM?

When working with the DOM, it's worth knowing what isn't the DOM, particularly when using browser dev tools.

The DOM is not your HTML markup

The DOM is not your source .html file,
it is not viewable when you View page source.

Although the DOM is a representation of the document, it is not an exact duplication in the browser. The browser will fix various issues with the underlying mark up (HTML).

Such as:

Inserting omitted tbody tags into table structures
closing unclosed tags
moving tags incorrectly nested in other elements

The DOM is not static

Since the DOM is not your markup, it can be continually amended and updated with JavaScript, once the JavaScript has been loaded and run in the browser (the client) .

DOM manipulation can happen as part of the script's program design, it may also happen as part of scripted responses to user input or events, which can occur at any time.

Client-side JavaScript can be executed from various sources:

Within the HTML document (via <script> tags)
Linked externally via markup.
Dynamically loaded with JavaScript
Browser extension

Note: browser extensions often dynamically append elements to the DOM. Bare this in mind, when troubleshooting web pages/applications.

The DOM is not CSS content

When inspecting elements in browser devtools, you may also see CSS pseudo-elements (::before, ::after) near DOM elements. CSS pseudo-elements aren't part of the DOM, you can't manipulate them using DOM APIs and JavaScript.

The DOM is not JavaScript

Although you may write DOM APIs in JavaScript, DOM APIs aren't JavaScript nor are its objects the same as JavaScript objects.

querySelector != JavaScript

The DOM is after all, an interface for JavaScript to interact with the source document.

Related models/concepts

BOM

BOM stands for Browser Object Model and is a related object model used for interacting with documents inside web browsers.

The BOM is an unofficial standard but generally consists of the following objects:
Navigator
Window
Location
History
Frame

The document object is child object of the window object, which is a global object for the browser.

The BOM like the DOM, has it's own properties and methods. For example, the DOMContentLoaded window event, fires when the initial HTML has been loaded and parsed, regardless of stylesheet, image and subframe loading state.

CSSOM and Render Tree

Beside the DOM, the browser also creates an accompanying CSS Object Model, (the CSSOM) taking into account all the styles applied to the document, from various sources (external, embedded, inline, user-agent, etc).

The browser then combines the DOM and CSSOM in a render tree, using only the nodes needed to render the web page.

The browser will use the render tree to paint/render the document to the device's screen.

The DOM and CSSOM, are independent models and form the critical rendering path.

Accessibility tree

Browsers will create the accessibility tree based upon the DOM. This tree exposes the accessible objects for HTML elements to assistive technologies and its users.

For accessible web pages, it is important to author HTML in a semantic/meaningful way, wherever possible adhering to web standards.