CSS Flexible Box Layout explained

Flexbox
Long Name:CSS Flexible Box Layout
Native Name:CSS Flexible Box Layout
Native Name Lang:en
Status:Candidate Recommendation (CR)
Year Started:[1]
Version:Level 1[2]
Preview:Working Draft
Preview Date:[3]
Committee:CSS Working Group
Base Standards:CSS
Abbreviation:Flexbox

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS web layout model.[4] It is in the W3C's candidate recommendation (CR) stage. 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) 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.

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 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]

, 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.

    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;

    Notes and References

    1. Web site: CSS Flexible Box Layout Module Level 1 Publication History - W3C. W3C. n.d.. 2021-04-08.
    2. Web site: CSS Flexible Box Layout Module Level 1. W3C. 2018-11-09. 2021-04-08. CSS Working Group. Tab. Atkins Jr.. Elika J.. Etemad. Rossen. Atanassov. Alex. Mogilevsky. L. David. Baron. Neil. Deakin. Ian. Hickson. David. Hyatt.
    3. Web site: CSS Flexible Box Layout Module Level 1. CSS Working Group Editor Drafts. 2021-03-25. 2021-04-08. Tab. Atkins Jr. Elika J.. Etemad. Rossen. Atanassov. Alex. Mogilevsky. L. David. Baron. Neil. Deakin. Ian. Hickson. David. Hyatt.
    4. Web site: Basic concepts of flexbox. n.d.. 2021-04-08. MDN Web Docs.
    5. Web site: Use CSS media queries to create responsive websites. https://web.archive.org/web/20201013191836/https://www.ibm.com/developerworks/library/wa-cssqueries/index.html. dead. 2020-10-13. IBM Developer. 2012-10-23. 2021-04-08. Jeff. Bail.
    6. Web site: Shepherd . Richard . 2011-09-19 . CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started . 2021-04-08 . Smashing Magazine.
    7. Web site: CSS Grid Layout Module Level 1. CSS Working Group. W3C. 2020-12-18. 2021-04-08. Tab. Atkins Jr.. Elika J.. Etemad. Rossen. Atanassov. Oriol. Brufau. Alex. Mogilevsky. Phil. Cupp.
    8. Web site: CSS3 Flexible Box Layout: Everything I Wish I Knew When I Started. Smashing Magazine. 2011-09-19. 2021-04-08. Richard. Shepherd.
    9. https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ Flexible Box Layout Module, W3C Working Draft, 23 July 2009
    10. Web site: CSS Flexible Box Layout Module . Can I use . 2020-09-03.

    This article is licensed under the GNU Free Documentation License. It uses material from the Wikipedia article "CSS Flexible Box Layout".

    Except where otherwise indicated, Everything.Explained.Today is © Copyright 2009-2024, A B Cryer, All Rights Reserved. Cookie policy.