 | This articleneeds additional citations forverification. Please helpimprove this article byadding citations to reliable sources. Unsourced material may be challenged and removed. Find sources: "Flexbox" – news ·newspapers ·books ·scholar ·JSTOR(April 2014) (Learn how and when to remove this message) |
| CSS Flexible Box Layout | |
| Status | Candidate Recommendation (CR) |
|---|---|
| Year started | 23 July 2009 (2009-07-23)[1] |
| Latest version | Level 1[2] November 9, 2018 (2018-11-09)[2] |
| Preview version | Working Draft March 25, 2021 (2021-03-25)[3] |
| Organization | |
| Committee | CSS Working Group[2] |
| Editors |
Former editors
|
| Base standards | CSS |
| Website | www |
CSS Flexible Box Layout, commonly known asFlexbox,[2] is aCSS web layout model.[4] It is in theW3C's candidate recommendation (CR) stage.[2] The flex layout allowsresponsive elements within a container to be automatically arranged depending on viewport (device screen) size.
| Cascading Style Sheets |
|---|
| Concepts |
| Philosophies |
| Tools |
| Comparisons |
Mostweb pages are written in a combination ofHTML (Hypertext Markup Language),JavaScript andCSS (Cascading Style Sheets). In short, HTML specifies thecontent and logical structure of the page, while the CSS specifieshow it looks: its colors, fonts, formatting, layout, and styling.
CSS flex-box layout is a particular way to specify the layout of HTML pages.
One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to fit within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than that of other CSS layout models, which are generally uni-directional. The flex directional flow can be specified rightwards, leftwards, upwards, or downwards. Individual items within a flex container may also be automatically rearranged to suit the available layout space.[3]
From the late 2000s onward, the intensive use of the Web bymobile agents motivated "liquid layouts" andresponsive elements for the growing variety ofscreen sizes.[5] In the 2010s, the intensive use of popularJavaScript layoutframeworks, such asBootstrap, inspired CSS flex-box and grid layout specifications.[6]
CSS modules included solutions akin to this, like flexbox[2] andgrid.[7] Flexbox is originally based on a similar feature available inXUL, the user interface toolkit fromMozilla, used inFirefox.[8][9]
As of December 2022[update], 99.68% of installed browsers (99.59% of desktop browsers and 100% of mobile browsers) support CSS Flexible Box Layout.[10]
The following terms are associated with the flexbox layout model.
Designating an element as a flex element requires setting the element's CSS display property to either flex or inline-flex, as follows:
display:flex;
Or:
display:inline-flex;
By setting the display to one of the two values above, an element becomes a flex container and its children, flex items. Setting the display to flex makes the container ablock-level element, while setting the display to inline-flex makes the container aninline-level element.[4]
One of flexbox's advantages is the ability to easily align items within the container to the center of a page, both vertically and horizontally.
display:flex;align-items:center;justify-content:center;
