CSS Flexible Box Layout

Last updated
Flexbox
CSS Flexible Box Layout
AbbreviationFlexbox
Native name
CSS Flexible Box Layout
Status Candidate Recommendation (CR)
Year started23 July 2009 (2009-07-23) [1]
Latest versionLevel 1 [2]
November 9, 2018 (2018-11-09) [2]
Preview versionWorking Draft
March 25, 2021 (2021-03-25) [3]
Organization
Committee CSS Working Group [2]
Editors
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
Former editors
    • Alex Mogilevsky
    • L. David Baron
    • Neil Deakin
    • Ian Hickson
    • David Hyatt
[2]
Base standards CSS
Website www.w3.org/TR/css-flexbox-1/

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.

Contents

Concepts

Most web pages are written in a combination of HTML (Hypertext Markup Language) 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. [8] [9]

As of December 2022, 99.68% of installed browsers (99.59% of desktop browsers and 100% of mobile browsers) support CSS Flexible Box Layout. [10]

Terminology

The following terms are associated with the flexbox layout model.

Flex container
Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.
Flex item
Any direct child element held within the flex container is considered a flex item. Any text within the container element is wrapped in an unknown flex item.
Axes
Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.
Flex-direction
Establishes main axis. Possible arguments: row (default), row-reverse, column, column-reverse.
Justify-content
Determines how content gets placed on the main axis on the current line. Optional arguments: left, right, center, space-between, space-around.
Align-items
Determines the default for how flex items get placed on the cross axis on each line.
Align-content
Determines the default for how cross axis lines are aligned.
Align-self
Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.

Directions

cross-start
cross-end
The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.
main-start
main-end
The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end.
Order
Places elements in groups and determines which order they are to be placed in within the container.
Flex-flow
Shorthands flex-direction and flex-wrap to place the flex content.

Lines

Lines
Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.

Dimensions

Main size
Cross size
Main size and cross size are the height and width of the flex container, each dealing with the main and cross axes respectively.

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.

display:flex;align-items:center;justify-content:center;

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

XSL-FO is a markup language for XML document formatting that is most often used to generate PDF files. XSL-FO is part of XSL, a set of W3C technologies designed for the transformation and formatting of XML data. The other parts of XSL are XSLT and XPath. Version 1.1 of XSL-FO was published in 2006.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

<span class="mw-page-title-main">Grid (graphic design)</span> Used in graphic design to guide objects

In graphic design, a grid is a structure made up of a series of intersecting straight or curved lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

In computing, quirks mode is an approach used by web browsers to maintain backward compatibility with web pages designed for old web browsers, instead of strictly complying with web standards in standards mode. This behavior has since been codified, so what was previously standards mode is now referred to as simply no quirks mode.

<span class="mw-page-title-main">Online rich-text editor</span> Online interface for editing rich text

An online rich-text editor is the interface for editing rich text within web browsers, which presents the user with a "what-you-see-is-what-you-get" (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents.

In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

<span class="mw-page-title-main">Initial</span> Oversized first letter in a text block

In a written or published work, an initial capital is a letter at the beginning of a word, a chapter, or a paragraph that is larger than the rest of the text. The word is derived from the Latin initialis, which means standing at the beginning. An initial is often several lines in height and in older books or manuscripts are known as "inhabited" initials. Certain important initials, such as the Beatus initial or "B" of Beatus vir... at the opening of Psalm 1 at the start of a vulgate Latin. These specific initials in an illuminated manuscript were also called initiums.

<span class="mw-page-title-main">EPUB</span> E-book format

EPUB is an e-book file format that uses the ".epub" file extension. The term is short for electronic publication and is sometimes styled ePub. EPUB is supported by many e-readers, and compatible software is available for most smartphones, tablets, and computers. EPUB is a technical standard published by the International Digital Publishing Forum (IDPF). It became an official standard of the IDPF in September 2007, superseding the older Open eBook (OEB) standard.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

<span class="mw-page-title-main">Holy grail (web design)</span> CSS programming trick for dividing a web page into three columns

The holy grail is a web page layout which has multiple equal-height columns that are defined with style sheets. It is commonly desired and implemented, but for many years, the various ways in which it could be implemented with available technologies all had drawbacks. Because of this, finding an optimal implementation was likened to searching for the elusive Holy Grail.

The emphasis mark or emphasis dot is a typographic marking used in some East Asian languages to indicate emphasis. The markings takes in many forms like, a dot or a bullet, a circle, or a triangle. It was used more traditionally, but nowadays, with technology, quotations or changing of font style prevails.

The CSS Working Group is a working group created by the World Wide Web Consortium (W3C) in 1997, to tackle issues that had not been addressed with CSS level 1. As of December 2022, the CSSWG had 147 members.

<span class="mw-page-title-main">CSS grid layout</span>

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

References

  1. "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
  2. 1 2 3 4 5 6 7 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.
  3. 1 2 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.
  4. 1 2 "Basic concepts of flexbox". MDN Web Docs. n.d. Retrieved 2021-04-08.
  5. 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.
  6. Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
  7. 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.
  8. Shepherd, Richard (2011-09-19). "CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started". Smashing Magazine. Retrieved 2021-04-08.
  9. Flexible Box Layout Module, W3C Working Draft, 23 July 2009
  10. "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.