CSS Flexible Box Layout, commonly known as Flexbox,[2] is a CSS web layout model.[4] It is in the W3C's candidate recommendation (CR) stage.[2] The flex layout allows responsive elements within a container to be automatically arranged depending on viewport (device screen) size.
Concepts
Most web pages are written in a combination of HTML (Hypertext Markup Language), JavaScript and CSS (Cascading Style Sheets). In short, HTML specifies the content and logical structure of the page, while the CSS specifies how 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]
History
From the late 2000s onward, the intensive use of the Web by mobile agents motivated "liquid layouts" and responsive elements for the growing variety of screen sizes.[5] In the 2010s, the intensive use of popular JavaScript layout frameworks, such as Bootstrap, inspired CSS flex-box and grid layout specifications. [6]
CSS modules included solutions akin to this, like flexbox[2] and grid.[7] Flexbox is originally based on a similar feature available in XUL, the user interface toolkit from Mozilla, used in Firefox.[6][8]
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.[9]
Terminology
The following terms are associated with the flexbox layout model.
Directions
Lines
Dimensions
Usage
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 a block-level element, while setting the display to inline-flex makes the container an inline-level element.[4]
Align to center
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.
.container {
display: flex;
align-items: center;
justify-content: center;
}
References
- ^ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
- ^ a b c d e f g Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2018-11-09). "CSS Flexible Box Layout Module Level 1". W3C. Retrieved 2021-04-08.
- ^ a b Atkins Jr, Tab; Etemad, Elika J.; Atanassov, Rossen; Mogilevsky, Alex; Baron, L. David; Deakin, Neil; Hickson, Ian; Hyatt, David, eds. (2021-03-25). "CSS Flexible Box Layout Module Level 1". CSS Working Group Editor Drafts. Retrieved 2021-04-08.
- ^ a b "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.
- ^ Bail, Jeff (2012-10-23). "Use CSS media queries to create responsive websites". IBM Developer. Archived from the original on 2020-10-13. Retrieved 2021-04-08.
- ^ a b Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
- ^ Atkins Jr., Tab; Etemad, Elika J.; Atanassov, Rossen; Brufau, Oriol; Mogilevsky, Alex; Cupp, Phil, eds. (2020-12-18). "CSS Grid Layout Module Level 1". W3C. CSS Working Group. Retrieved 2021-04-08.
- ^ Flexible Box Layout Module, W3C Working Draft, 23 July 2009
- ^ "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.
organizations
- International World Wide Web Conference (IW3C)
- Steering Committee (IW3C2)
- First conference ("WWW1", 1994)
