This article has multiple issues. Please help improve it or discuss these issues on the talk page . (Learn how and when to remove these template messages)
|
CSS Flexible Box Layout | |
Abbreviation | Flexbox |
---|---|
Native name | CSS Flexible Box Layout |
Status | Candidate Recommendation (CR) |
Year started | 23 July 2009 [1] |
Latest version | Level 1 [2] November 9, 2018 [2] |
Preview version | Working Draft March 25, 2021 [3] |
Organization | |
Committee | CSS Working Group [2] |
Editors |
Former editors
|
Base standards | CSS |
Website | www |
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.
Cascading Style Sheets |
---|
Concepts |
Philosophies |
Tools |
Comparisons |
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]
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 [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 a block-level element, while setting the display to inline-flex makes the container an inline-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;
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.