Flexbox Layout in CSS
Understanding Flexbox and its usage
A flexible box, or Flexbox as it is called, is a set of properties that can be used to design advanced responsive layouts for websites. Before Flexbox, there were four kinds of layout models (inline, block, table, and positioned) and with limitations, they did not cater well for designing modern web applications. These limitations left the web developers with no option other than using floating elements, table-cell displays, and writing innumerable CSS hack tricks, which was a lot of headache in itself.
Let's get rid of any more CSS hacks, and enter the world of CSS Flexbox Layout.
Flexbox and its Properties
CSS flexbox allows the website designers to control how items are aligned, positioned, and sized within their container to fit in any viewport.
All the items inside the main container are laid out along two axes, the main (x-axis) and the cross-axis (y-axis).
The main container is the parent element, also called a flex container, while all the elements within this container are its children, called flex items.
The above image is a flex container (area in black) with three flex items.
The HTML for the above layout will be-
The flex container becomes flexible when the display property is set to flex.
Flex container-
The flex container properties include the following-
a. flex-direction:
It defines the direction in which the items will be aligned. Its options include row, row-reverse, column, column-reverse.
b. flex-wrap:
This property defines whether items will be wrapped or not, options include wrap, no-wrap, wrap-reverse.
c. flex-flow:
This property is a combination of flex-direction and flex-wrap properties.
d. justify-content:
This property is used to align the flex items along the x-axis. The below illustration will show all options available.
e. align-items:
This property is used to align the items inside the flex container along the y-axis, let's take a look at the options available-
f. align-content:
This property is used to align the flex item lines. We will use this property along with the flex-wrap property set to wrap to demonstrate better-
Flex Item-
Once we have assigned the display property of the parent container as flex, the child item also becomes flexible.
The below properties can be used to align the flex item.
a. order:
This is simply used to display the order of the flex items.
b. flex-grow:
This property defines how much an item will grow relative to the other flex item-
b. flex-shrink:
This property defines how much an item will shrink relative to the other flex item.
c . flex-basis:
It defines the initial width of the flex item-
d . flex:
This property combines the above three properties of flex items(flex-grow, flex-shrink, and flex-basis). It can be used as below example-
e. align-self:
This property defines the alignment of the selected item and overrides the align-item property of the container.
That’s all folks!
Hope you will be able to build intelligent responsive websites using the new flexbox layout.
Thank you, and Happy learning!
