Flexible box

Most web pages are written in a combination of HTML and CSS. HTML : specifies content and logical structure of the page. CSS : specifies how it looks (colors, fonts, formatting, layout, and styling).

CSS Flexible Box Layout(Flexbox) : specifies the layout of HTML pages. Using this, elements can be arranged in a web page depending upon screen size within the container.

To make an element as a flex element, need to set elements CSS display property to either flex or inline-flex.

By setting the display property, an element becomes a flex container and its children flex items.

Properties

For the flex container (Parent)

1. Flex-direction

This property helps in the alignment of flex items horizontally or vertically. It takes following 4 values:

• row (default): left to right
• row-reverse: right to left
• column: top to bottom
• column-reverse: bottom to top

2. Flex-wrap

Flex items will try to fit in one line by default. This property allows to change it as needed.

• nowrap (default): all flex items will be on one line.
• wrap: flex items will wrap onto multiple lines, from top to bottom.
• wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

3. Flex-flow

Its a property that includes both flex-direction and flex-wrap properties. By default flex-flow is set to row nowrap.

4. Justify-content

It is similar to text-align. It helps to distribute extra free space left, among the items in a line.

• flex-start (default): items are aligned to the start of the line.
• flex-end: items are aligned at the end of the line.
• center: items are aligned to the center of line.
• space-between: items are evenly distributed in the line. first item is on the start & last item on the end.
• space-around: items are evenly aligned in the line with equal space around them.
• space-evenly: items are aligned with equal space between any two items.

5. Align-items

This defines how flex items are aligned vertically on the current line.

• stretch (default): items are stretched to fill the container height.
• flex-start / start / self-start: items are placed at the start.
• flex-end / end / self-end: items are placed at the end.
• center: items are placed at the center.
• baseline: items are aligned along the baseline of the container.

6. Align-content

This aligns a flex container’s lines within the container.

• normal (default): items are alinged in their default position.
• flex-start / start: items aligned to the start of the container.
• flex-end / end: items aligned to the end of the container.
• center: items are aligned to the center of container.
• space-between: items are evenly distributed; the first line is at the start of the container while the last one is at the end.
• space-around: items are evenly aligned with equal space around each line.
• space-evenly: items are evenly aligned with equal space around them.
• stretch: lines are stretched to take up the remaining space.

For the Flex Items(Child)

1. Order

This property controls the order in which they appear in the flex container. By default value is 0.

2. Flex-grow

This defines how much flex item should “Grow” if needed, inside the flex container. No negatives are possible, will take up only 0 and positive values.

3. Flex-shrink

This defines how much flex item should “Shrink” if needed, inside the flex container. No negatives are possible.

4. Flex-basis

This defines the size of an element based on the flex-direction. Default value is auto.

5. Align-self

This allows to set alignment by overriding for individual flex items that is set by align-items property for container. This takes all the values same as align-items property. Default value is auto.

6. Flex

Its the combined shorthand for flex-grow, flex- shrink and flex-basis properties. The default value is 0 1 auto and can also be written as flex: default.