The defining aspect of the flexbox is the ability to alter its items, width and/or height to best fill the available space on any display device. A flex container expands its items to fill the available free space, or shrinks them to prevent overflow.
Problems with float layout
Difficulty with containement - If our site has some unpredictable content then it becomes difficult to maintain the layout with floats. Also it becomes tedious maintaining this.
Source order dependence - The layout is HTMl source dependent, so it becomes difficult to alter the layout for different media queries for responsive sites.
Equal Height Columns issues - If we have 2-3 columns with different content in them and we need them to be of equal height irrespective of the content in it, then it becomes very difficult.
Content Centering - Using floats its very cumbersome to make the content of div to align in center both vertically and horizontally.
How flexbox cures these issues
Makes flex items grow to fill available space for or shring to avaoid overflow. By this it resolves the issue of unknown content overflowing also aligns layouts to adhere to the expectations of the themer.
It gives flex items a proportional dimensions
Flex items inside the flex containers can be layed out in any direction, so this solves our issue with content order in different media queries. It makes the visual content order to be independent of the HTML markup order thereby helping in the responsive theming of sites.
main axis, main dimension - The main axis of a flex container is the primary axis along which flex items are laid out. It extends in the main dimension.
main-start, main-end - The flex items are placed within the container starting on the main-start side and going toward the main-end side.
main size,main size property - A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the width or height property, whichever is in the main dimension.
cross axis, cross dimension - The axis perpendicular to the main axis is called the cross axis. It extends in the cross dimension.
cross-start,cross-end - Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
cross size,cross size property - The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.
The 'flex-direction' property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction that flex items are laid out in.
The 'flex' property specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis. When an element is a flex item, 'flex' is consulted instead of the main size
property to determine the main size of the element. If an element is not a flex item, 'flex' has no effect.
The 'justify-content' property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically it helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
Note: 'space-*' values not supported in older syntaxes.
Flex items can be aligned in the cross axis of the current line of the flex container, similar to 'justify-content' but in the perpendicular direction. 'align-items' sets the default alignment for all of the flex container's items, including anonymous flex items. 'align-self' allows this default alignment to be overridden for individual flex items. (For anonymous flex items, 'align-self' always matches the value of 'align-items' on their associated flex container.)
Values: auto | flex-start | flex-end | center | baseline | stretch
Flexbox Align Content
The 'align-content' property aligns a flex container's lines within the
flex container 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.