CSS had four known layout modes before the Flexbox Layout module was introduced. We had:
Block
Inline
Table
Positioned
With the help of flexbox or the Flexible Box Layout Module we can easily design a flexible responsive layout structure that does not need float or positioning.
Elements
To start with, we need to define what is called a flex container. A flex container is, basically, a parent element whose display property is set to ‘flex’. By setting the container element as the flex container, following properties are enabled:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
Let’s take an individual look at them
flex-direction:It states the direction in which the flex items will be stacked
flex-wrap: We can set if the flex items need to wrap or not, using this property.
justify-content:This is to align the flex items
align-items: This is for the vertical alignment of the items.
align-content: The flex lines can be aligned using this property
Perfect Centering: It is an issue of aligning the element in a flexbox, exactly at the center in both directions. This can be achieved by setting both, justify-content and align items to the center.
Items
Items/child items/flex items are the direct children of the flex container. Here are the properties associated with them:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
To specify the order of the items
flex-grow: Using this property, we can decide how much an item is going to grow relative to the other flex items
flex-shrink: Opposite of flex-grow. Specifies how much the item would shrink relative to other items.
flex-basis: The initial length of the flex item.
flex: Shorthand property; can be used to set the flex-grow, flex-shrink, and flex-basis properties.
align-self: You can specify what alignment an item will have in the flex container using this property.
Responsive Image Gallery
We can also create responsive image galleries using the flexbox layout. The gallery will have four, two or one full-width image(s) in a row, as per the screen size allows