Flex Box

Basic Concepts of Flexbox

The Flexible Box Module, usually referred to as flexbox, was designed as a
one-dimensional layout model, and as a method that could offer space
distribution between items in an interface and powerful alignment capabilities.
This article gives an outline of the main features of flexbox, which we will be
exploring in more detail in the rest of these guides.
When we describe flexbox as being one dimensional we are describing the fact
that flexbox deals with layout in one dimension at a time — either as a row or
as a column. This can be contrasted with the two-dimensional model of CSS
Grid Layout, which controls columns and rows together.
Flex container(Parent): The flex container specifies the properties of the parent.
It is declared by setting the display property of an element to either flex or inlineflex.
Flex items(Child): The flex items specify properties of the children. There may
be one or more flex items inside a flex container.

Axes and flex direction

Flexbox operates with two axes: one main axis and one cross axis that runs
perpendicular to the main axis. We can specify the main axis by setting the flexdirection property to row, row-reverse, column or column-reverse. The default
value is row.
Setting flex-direction to row or row-reverse sets the main axis along the row in
the inline direction.

Flexbox Axes

• row
• row-reverse
• column
• column-reverse

Justify Content:-

The justify-content property aligns the flexible container’s items when the items
do not use all available space on the main-axis (horizontally).

The justify-content property accepts five different values:

• flex-start (default): items are packed toward the start line
• flex-end: items are packed toward to end line.
• center: items are centered along the line.
• space-between: items are evenly distributed in the line; first item is on
  the start line, last item on the end line.
• space-around: items are evenly distributed in the line with equal space
  around them.
• space-evenly: items are distributed so that the spacing between any two
  adjacent alignment subjects, before the first alignment subject, and after
  the last alignment subject is the same.

Align-Item

The align-items property defines the default behavior for how items are laid out
along the cross axis (perpendicular to the main axis).
Imagine a horizontal flexbox layout. That horizontal flow is the main axis, so
align-items is the alignment opposite that, on the vertical axis. Bear in mind that
changes when the main axis changes, and the cross axis changes with it.
You can think of align-items as the justify-content version for the cross-axis
(perpendicular to the main-axis). 

The align-items property accepts 5 different values:

• flex-start: cross-start margin edge of the items is placed on the cross-start
  line.
• flex-end: cross-end margin edge of the items is placed on the cross-end
  line.
• center: items are centered in the cross-axis.
• baseline: items are aligned such as their baselines align.
• stretch (default): stretch to fill the container (still respect min-width/max-width)



Aline Content

It helps to align a flex container’s lines within it when there is extra space in the
cross-axis, similar to how justify-content aligns individual items within the
main-axis.
Note, this property has no effect when the flexbox has only a single line.
The align-content property accepts 6 different values:-

• flex-start: lines packed to the start of the container.
• flex-start: lines packed to the start of the container
• flex-end: lines packed to the end of the container.
• center: lines packed to the center of the container.
• flex-start: lines packed to the start of the container.
• space-between: lines evenly distributed; the first line is at the start of the
  container while the last one is at the end.
• space-around: lines evenly distributed with equal space between them.
• stretch (default): lines stretch to take up the remaining space.

The following figure helps understand how the lines are stacked up in a flex
container depending on the align-content value.

Controlling ratios of flex items along main axis

I’ll show you how to use the following flexbox sizing properties:

• flex-basis
• flex-grow
• flex-shrink

The Flex-Basis Property:-

The flex-basis property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is auto. If flexbasis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be thecase if you had given your item a width of 200 pixels. In that case 200px would be the flex-basis for this item.

If your item is instead auto-sized, then auto resolves to the size of its content. At this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis.
n this example I have created a series of inflexible boxes, with both flexgrow and flex-shrink set to 0. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a flexbasis of 150px, whereas the other two items have no width and so are sized according to their content width.

In addition to the auto keyword, you can use the content keyword as the flexbasis. This will result in the flex-basis being taken from the content size even if there is a width set on the item. You can also get the same effect by using auto as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.

If you want flexbox to completely ignore the size of the item when doing space distribution then set flex-basis to 0. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this
as we move on to look at flex-grow.

Flex Grow

Describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.

Flex grow accepts any floating point value >= 0, with 0 being the default value.A container will distribute any remaining space among its children weighted by the child’s flex grow value.

Flex Shrink

Describes how to shrink children along the main axis in the case that the total size of the children overflow the size of the container on the main axis. flex shrink is very similar to flex grow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.

Flex shrink accepts any floating point value >= 0, with 1 being the default value. A container will shrink its children weighted by the child’s flex shrink value.