butterfly/kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bfa66fc0f8
kb/data/developer.mozilla.org/en-US/docs/Glossary/Flexbox-0.md

203 lines
12 KiB
Markdown
Raw Blame History

---
title: "Flexbox - Glossary | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Glossary/Flexbox"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:31:53.301699+00:00"
instance: "kb-cron"
---
* [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#content)
* [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#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. [Flexbox](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)
# Flexbox
Flexbox is the commonly-used name for the [CSS flexible box layout module](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout), a layout model for displaying items in a single dimension — as a row or as a column.
In the specification, flexbox is described as a layout model for user interface design. The key feature of flexbox is that items in a flex layout can grow and shrink. Space can be assigned to the items themselves, or distributed between or around the items.
Flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items.
## In this article
* [See also](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#see_also)
## [See also](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#see_also)
### [Property reference](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#property_reference)
* [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content)
* [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-items)
* [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-self)
* [`flex`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex)
* [`flex-basis`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-basis)
* [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction)
* [`flex-flow`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-flow)
* [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-grow)
* [`flex-shrink`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-shrink)
* [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-wrap)
* [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content)
* [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/order)
### [Further reading](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox#further_reading)
* CSS flexbox guides:
* [Basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
* [Relationship of flexbox to other layout methods](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Relationship_with_other_layout_methods)
* [Aligning items in a flex container](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Aligning_items)
* [Ordering flex items](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Ordering_items)
* [Controlling ratios of flex items along the main axis](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Controlling_flex_item_ratios)
* [Mastering wrapping of flex items](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Wrapping_items)
* [Typical use cases of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Use_cases)
* [CSS Flexible Box Layout Module Level 1](https://drafts.csswg.org/css-flexbox-1/) specification
Reference in New Issue View Git Blame Copy Permalink