Flex layout

Advantages of flex layout

1. The child elements of the Flex layout do not deviate from the flow of the document, and follow the “nature of the flow” nicely.

Flex is a modern layout approach, the first time the W3C has provided a true CSS specification for layout. Flex is very flexible with rich properties, making layout implementation more diverse and easy to use.

Flex compatibility

Browsers of earlier versions (IE9 and below) are not supported

Concept: elastic box, child element

  • Elastic box: refers to the parent container declared using display:flex or display:inline-flex.

  • Child/elastic elements: Refers to the children of the parent container (if the parent container is declared as a Flex box).

Concept: main axis and side axis

  • Main axis: The main axis of the Flex container, which is horizontal by default, from left to right.

  • Side axis: The axis perpendicular to the main axis is called the side axis. By default, it is vertical and runs from top to bottom.

Note: Spindle and side axes are not fixed and can be changed by flex-direction

Elastic box

Statement to define

Use display:flex or display:inline-flex to declare a parent container as an elastic box. Note :display:inline-flex is rarely used.

The flex – direction attribute

Flex-direction: Sets the direction of the neutrons in the box. Attribute values can be:

Attribute values describe
row Horizontal arrangement of child elements from left to right (default)
column Row the child elements vertically from top to bottom
row-reverse Row the child elements from right to left
column-reverse Row the child elements vertically from bottom to top

The flex – wrap attributes

Flex-wrap: Controls line wrapping when child elements overflow.

The justify – content attribute

Context-content: Controls how child elements are arranged on the main axis.

The elastic element

The justify – content attribute

  • justify-content: flex-start;Sets the child element inAlignment on the spindle. Attribute values can be:
    • flex-startAlign from the beginning of the spindle (default)
    • flex-endAlign from the endpoint of the spindle
    • centerAlign center
    • space-aroundDivide it evenly in the parent box
    • space-betweenAlign both ends evenly

The align – the items property

Align-items: Sets the alignment of child elements on the side axis. – flex-start – flex-end – flex-end – baseline – flex-start-center – stretch (default)

flexProperty: Sets the weight of the subbox