CSS flex-box layout is a CSS3 web layout model. It is in the W3C’s candidate recommendation (CR) stage. [1] The flex layout allows for responsive

Concepts

One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can be adjusted in size-or 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 than that, for example, of the block and inline display types, which is uni-directional. Indeed, not only can flex directional flow be specified, at the level level, as rightwards, leftwards, upwards, or downwards; individual items within a container may also be reordered and rearranged. [2]

History

In the 2000s the intensive internet access by mobile agents motivated “liquid layouts” and responsive elements for the growing variety of screen sizes. In the 2010s, Bootstrap , CSS flex-box, and grid layout specifications. [3] [4]

Terminology

Following are a few terms associated with the flex layout model

Flex container

Parent element that holds all flex items. Using the CSS display property, the container can be defined as flex or inline-flex.

Flex item

Any child element held within the flex container is considered a flex item. Any text within the container 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-management

Establishes main axis. Optional arguments: row (default), row-reverse, column, column-reverse.

Justify-content

Determines how to get along the line. Optional arguments: left, right, center, space-between, space-around.

Align-items

Determines the default for how to get the most out of each other.

Align-content

Determines the default for the future.

Align-self

How to find a single item in the cross axis. This overrides any defaults set by align-items.

Directions

The main-start / hand-end of the flexible container, starting from the main-end and going to the end-end. The cross-start / cross-end sides where flex lines get filled with flex items from cross-start to cross-end.

Order

Places in groups and determining which order they are in the container.

Flex Flow

Shorthands flex-direction and flex-wrap to the flex.

Lines

Flex items can 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 the stacking of the container.

Dimensions

The size and cross-section of the container are each one of the largest and the largest in the world.

Designate a flex box

Designing an element as a flex element is relatively easy. All that is necessary to set the display property to flex or inline-flex as follows:

display: flex;

Gold:

display: inline-flex;

By setting the display to one of the two values ​​above, an element becomes a flexible 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 . [5]

Align to center

One of flexbox’s advantages is the ability to easily align with the list of vertically and horizontally.

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

References

  1. Jump up^ “CSS Flexible Box Level Layout Module 1” . www.w3.org . Retrieved 2016-07-23 .
  2. Jump up^ “CSS Flexible Box Level Layout Module 1” . dev.w3.org . Retrieved 2016-07-23 .
  3. Jump up^ https://github.com/kvdmolen/grid-flexbox-sass
  4. Jump up^ https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/
  5. Jump up^ Using CSS Flexible Boxes – Web developer guide | DND