Flow relative values
In CSS,flow relative values are directional keyword values relative to an element's block and inline axes. These values includeblock-start,block-end,inline-start,inline-end,start, andend.
In CSS,physical properties define positions based on physical directions and reference specific sides of an element.
CSSlogical properties on the other hand define styles based on the document's writing mode and direction rather than the physical dimensions of the viewport. Logical properties are relative to the content flow and use directional keywords relative to the block and inline axes.
Block direction
Theblock axis refers to the axis that defines the stacking order of elements in a block layout. It's essentially the direction along which blocks of content — like paragraphs (<p>), headings, and divs (<div>) — are laid out on a webpage. This is also known as theblock direction. In left-to-right and right-to-left languages, the block direction is the vertical direction of the content flow, going from top to bottom.
Theblock-start andblock-end directions represent thestart edge andend edge of content along the block axis, or the "from" and "to" directions, respectively, withblock-start being the equivalent oftop andblock-end being the equivalent ofbottom in horizontal writing modes.
Inline direction
Theinline axis is perpendicular to the block axis. The inline axis represents the direction along which inline content like text flows within a block. This is also known as theinline direction. In left-to-right writing modes, like English, the inline direction is horizontal, left-to-right. In right-to-left languages, like Arabic and Hebrew, the inline direction is horizontal, right-to-left.
Inline-start andinline-end represent thestart edge andend edge of content along the inline axis, respectively, with the values and propertiesinline-start andinline-end being the equivalent ofleft andright properties and values in horizontal writing modes. Whether they are equivalent toright orleft depends on the writing direction. For example,inline-start is equivalent toleft in left-to-right languages andright in right-to-left languages.
Start and end
A CSS property's effects can be either one-dimensional or two-dimensional. For example,text-align concerns the inline direction of text only, so is one-dimensional. When contextually constrained to one dimension, the flow-relative keywords are abbreviated to juststart orend.