Jump to content

CSS Flexible Box Layout: Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous editNext edit →
Content deleted Content added
VisualWikitext
→‎Terminology: make list more semantic and accessible, the HTML output before didn't produce a semantically proper description list
try to make wording more neutral, rename sections and reorganize
Line 105: Line 105:
:'''Main size''' and '''cross size''' are the height and width of the flex container, each dealing with the main and cross axes respectively.
:'''Main size''' and '''cross size''' are the height and width of the flex container, each dealing with the main and cross axes respectively.


==Designate a flex box==
== Usage ==
Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:
Designating an element as a flex element requires setting the element's CSS display property to either flex or inline-flex, as follows:
<syntaxhighlight lang="CSS">display: flex;</syntaxhighlight>
<syntaxhighlight lang="CSS">display: flex;</syntaxhighlight>


Line 113: Line 113:
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 [[HTML_element#Block_elements|block-level element]], while setting the display to inline-flex makes the container an [[HTML_element#Inline_elements|inline-level element]].<ref>[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes Using CSS flexible boxes – Web developer guide | MDN<!-- Bot generated title -->]</ref>
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 [[HTML_element#Block_elements|block-level element]], while setting the display to inline-flex makes the container an [[HTML_element#Inline_elements|inline-level element]].<ref>[https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes Using CSS flexible boxes – Web developer guide | MDN<!-- Bot generated title -->]</ref>


== Align to center ==
=== 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.<syntaxhighlight lang="css">
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.<syntaxhighlight lang="css">
display: flex;
display: flex;

Revision as of 05:53, 8 April 2021

Flexbox
CSS Flexible Box Layout
AbbreviationFlexbox
Native name
CSS Flexible Box Layout
StatusCandidate Recommendation (CR)
Year started23 July 2009 (2009-07-23)[1]
Latest versionLevel 1[2]
November 9, 2018 (2018-11-09)[2]
OrganizationWorld Wide Web Consortium
CommitteeCSS Working Group[2]
Editors
  • Tab Atkins Jr.
  • Elika J. Etemad
  • Rossen Atanassov
  • Alex Mogilevsky
  • L. David Baron
  • Neil Deakin
  • Ian Hickson
  • David Hyatt
[2]
Base standardsCSS
Websitewww.w3.org/TR/css-flexbox-1/

CSS Flexible Box Layout, commonly known as Flexbox,[3]Cite error: A <ref> tag is missing the closing </ref> (see the help page). 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 upon screen size (or device).

Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

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 be constrained within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than those, for example, of the block and inline display types, which are generally uni-directional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.[4]

History

In the 2000s the intensive use of the Web her 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] [7]

CSS 3 modules included solutions akin to this, like flexbox [8] and grid.[9]

As of September 2020, 98.69% of installed browsers (99.29% 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

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. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-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.[11]

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;

References

  1. ^ "CSS Flexible Box Layout Module Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-08.
  2. ^ a b c d e 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. {{cite web}}: Cite has empty unknown parameter: |1= (help)
  3. ^ https://www.w3schools.com/csS/css3_flexbox.asp
  4. ^ "CSS Flexible Box Layout Module Level 1". dev.w3.org. Retrieved 2016-07-23.
  5. ^ https://www.ibm.com/developerworks/library/wa-cssqueries/index.html
  6. ^ https://github.com/kvdmolen/grid-flexbox-sass
  7. ^ https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/
  8. ^ https://www.w3schools.com/csS/css3_flexbox.asp
  9. ^ https://www.w3schools.com/css/css_grid.asp
  10. ^ "CSS Flexible Box Layout Module". Can I use. Retrieved 2020-09-03.
  11. ^ Using CSS flexible boxes – Web developer guide | MDN
Retrieved from "https://en.wikipedia.org/w/index.php?title=CSS_Flexible_Box_Layout&oldid=1016625509"