CSS Flexbox An Exploration

What exactly the flexbox is:- It is a layout modal that arranges its child elements in a manner in which child elements can be growable or shrinkable to fit in any space and to get displayed on all of the devices and screens. It is a new layout modal in the css3.

How to use flexbox

Applying this is very useful. In parent element, we have a child element. Declare the parent element as display: flex. Following is the example showing the use of flexbox:-  

.flex-container {
  display: -webkit-flex; 
  display: flex; 
}

.flex-container .child-item {
  background-color: #fff;
  color: #000;
  padding: 10px;
  margin: 10px;
  font-size: 13px;
}

Properties of flexbox are:

1. Flex-direction: row | row-reverse | column | column-reverse

2. Flex-wrap: nowrap | wrap | wrap-reverse

3. align-items: flex-start | flex-end | center | baseline | stretch

4. justify-content: flex-start | flex-end | space-between | center | space-around

5. align-content: flex-start | flex-end | center | space-between | space-around | stretch

• Flex-direction

This property specifies how items should be placed in the flex-container by settings the direction. It determines the direction that flex-items should be laid out in.

• Flex-wrap

This property sees that flex items should be forced into a single line or should be wrapped in the multiple lines. If this wrapping is allowed, then this property allows us to control a direction in which lines are stacked.

• Align-items

This property aligns flex items of current flex line as same as the justify-content but in the perpendicular direction.  

• Justify-content

Justify-content defines how the browser will distribute space between and around the flex items along with the main items of their container.

• Align-content

This property helps to coordinate a flex container's line within the flex container only when there exist some extra space on cross-axis. This property creates effects on those flex items that have the multiple lines. It doesn't work when the flex items are placed on the same single line. To check that flex item are spread across the multiple lines, we should add this flex-wrap property to wrap these flex items in the container.