---
title: "Flow relative values - Glossary | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:31:55.891919+00:00"
instance: "kb-cron"
---

  * [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#content)
  * [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#search)

[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) 

HTML reference
    
  * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
  * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
  * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")

HTML guides
    
  * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
  * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
  * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")

Markup languages
    
  * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
  * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
  * [XML](https://developer.mozilla.org/en-US/docs/Web/XML)

CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) 

CSS reference
    
  * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
  * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
  * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
  * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")

CSS guides
    
  * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
  * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
  * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
  * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")

Layout cookbook
    
  * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
  * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
  * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)

JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 

JS reference
    
  * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
  * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
  * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
  * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")

JS guides
    
  * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
  * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
  * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
  * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")

Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) 

Web API reference
    
  * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
  * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
  * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
  * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
  * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
  * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")

Web API guides
    
  * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
  * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
  * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
  * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
  * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)

All
[All web technology](https://developer.mozilla.org/en-US/docs/Web) 

Technologies
    
  * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
  * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
  * [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
  * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
  * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
  * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")

Topics
    
  * [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
  * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
  * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
  * [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
  * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)

Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 

Frontend developer course
    
  * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
  * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
  * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
  * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)

Learn HTML
    
  * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)

Learn CSS
    
  * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
  * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)

Learn JavaScript
    
  * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)

Tools
Discover our tools 
  * [Playground](https://developer.mozilla.org/en-US/play)
  * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)

  * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
  * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
  * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
  * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
  * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
  * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)

About
Get to know MDN better 
  * [About MDN](https://developer.mozilla.org/en-US/about)
  * [Advertise with us](https://developer.mozilla.org/en-US/advertising)

  * [Community](https://developer.mozilla.org/en-US/community)
  * [MDN on GitHub](https://github.com/mdn)

[Blog](https://developer.mozilla.org/en-US/blog/)
  1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
  2. [Flow relative values](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values)

# Flow relative values
In CSS, **flow relative values** are directional keyword values relative to an element's block and inline axes. These values include `block-start`, `block-end`, `inline-start`, `inline-end`, `start`, and `end`.
In CSS, [physical properties](https://developer.mozilla.org/en-US/docs/Glossary/Physical_properties) define positions based on physical directions and reference specific sides of an element.
CSS [logical properties](https://developer.mozilla.org/en-US/docs/Glossary/Logical_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.
## In this article
  * [Block direction](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#block_direction)
  * [Inline direction](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#inline_direction)
  * [Start and end](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#start_and_end)
  * [See also](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#see_also)

##  [Block direction](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#block_direction)
The **block 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>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p)), headings, and divs ([`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div)) — are laid out on a webpage. This is also known as the **block 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.
The **block-start** and **block-end** directions represent the _start edge_ and _end edge_ of content along the block axis, or the "from" and "to" directions, respectively, with `block-start` being the equivalent of `top` and `block-end` being the equivalent of `bottom` in horizontal writing modes.
##  [Inline direction](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#inline_direction)
The **inline 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 the **inline 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** and **inline-end** represent the _start edge_ and _end edge_ of content along the inline axis, respectively, with the values and properties `inline-start` and `inline-end` being the equivalent of `left` and `right` properties and values in horizontal writing modes. Whether they are equivalent to `right` or `left` depends on the writing direction. For example, `inline-start` is equivalent to `left` in left-to-right languages and `right` in right-to-left languages.
##  [Start and end](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#start_and_end)
A CSS property's effects can be either one-dimensional or two-dimensional. For example, [`text-align`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/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 just `start` or `end`.
##  [See also](https://developer.mozilla.org/en-US/docs/Glossary/Flow_relative_values#see_also)
  * [CSS logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values) module
  * [Basic concepts of logical properties and values](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Logical_properties_and_values/Basic_concepts)