What the flexbox ?

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated.

Using CSS Flexible Boxes

The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Many designers find the flexboxes easier to use than boxes. Without a lot of work, divs frequently rose to the top of a page when designers did not want them to---so for example, sticking a footer to the bottom of a page was difficult. The widths and heights of flexboxes vary to adapt to the display space, holding the lower down elements in place. Flexbox logic also asks whether you want div's to accrue to the right or on the bottom. The display order of flexbox elements is independent of their order in the source code.

Popular layouts can thus be achieved more simply and with cleaner code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on a linear reading of the HTML source.

Flexible Boxes Concept

The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fit in the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Block layout is vertically-biased; inline layout is horizontally-biased. Flexbox layout permits either. While the block layout works well for pages, it is inconvenient for application components that should change orientation, resize, stretch, or shrink as the user agent changes, phones flip from vertical to horizontal orientation, and so forth. Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts. Both are part of a wider effort of the CSS Working Group to provide for greater interoperability of web applications with different user agents, different writing modes, and other demands.

Flexible Boxes Vocabulary

Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. If flex-direction were column, then vertical would be the main axis and horizontal would be the cross axis. Consider the following diagram. It shows a flex container that has a flex-direction of row, meaning that the flex items follow each other horizontally across the main axis.

  • Flex container

    The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.

  • Flex item

    Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

  • Axes

    Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

    • The flex-direction property establishes the main axis.
    • The justify-content property defines how flex items are laid out along the main axis on the current line.
    • The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
    • The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.
  • Directions

    The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

    • The order property assigns elements to ordinal groups and determines which elements appear first.
    • The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.
  • Lines

    Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

  • Dimensions

    The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

    • The min-height and min-width properties initial value is 0.
    • The flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items.

Flex Item Considerations

Text that is directly contained inside a flex container is automatically wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space is not rendered, as if it were designated display: none.

Absolutely positioned children of a flex container are positioned so that their static position is determined in reference to the main start content-box corner of their flex container.

The margins of adjacent flex items do not collapse. Using auto margins absorbs extra space in the vertical or horizontal direction and can be used for alignment or to separate adjacent flex items.

Flexbox's alignment properties do "true" centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can't scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a "safe" option as well. For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the align- properties, just put auto margins on the flex items you wish to center. Instead of the justify- properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace justify-content with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the justify-content property.

Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the order property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.