CSS Flexbox Made Easy
Table of contents
Introduction
Have you ever wondered how complex looking layouts are made using CSS ? Well if you are worried about building complex layout,after reading this blog on layouts you will feel confident to build any layouts.
Layouts refers to way in which element can be arranged to occupy certain height , width and positioning of elements,its like where to put furniture in your house for better look . In CSS we have two different layout system. Flex which is commonly called as flexbox which is an one dimensionsal layout model,It excels at distributing space in single axis either horizontal or vertical whereas Grid layout system is two dimensional layout model which means it can control both axis. In simple words Flexbox is used when we have to build small scale simple layouts and Grid is used when we have to build large scale complex layouts. In this blog we will explore Flexbox.
CSS Flexbox
Flexbox has two components a Flex Container-the parent container <div> element and a Flex Items-elements inside<div> container. To Use flexbox layout we simply have to write display property’s value as flex in parent container.Once display is flex we can use flexbox properties to design any layout .
Let’s Understand Basic Terminolgies associated with it.
main axis – The main axis of a flex container is the primary axis along which flex items are laid out. It is not necessary that main axis will be horizontal it depends on flex direction property but by default it is a horizontal axis.
main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end.
main size – 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 – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
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 – 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.
Flex Container
Most Commonly Used Properties which will be applied to parent div (Flex Container) are
flex-direction : This property decides which will be main axis it’s value is row by default we can try its different values such as column, column reverse and row-reverse.
justify-content : justify content is used to align items on main axis when they do not occupy complete space. It can have different values as
center : content will be aligned on center of main axis.
flex-start : content will be aligned at start of container on main axis
flex-end : content will be aligned at end of container on main axis.
space-around : content will have space around it .
space-evenly : content will occupy space evenly in parent container on main axis.
space-between : content will have space between them.
align-items: align-item property works exactly same as justify-content but on cross axis. Its values are
center : content will be aligned at center on cross axis
flex-start : content will be aligned at start of container on cross axis.
flex-end : content will be aligned at end of container on cross axis.
stretch : stretch value stretches flex items to fill the container.
baseline : it arranges at content at baseline of container.
flex-wrap : This property tells whether flex items should be wrap or not.Its values are
nowwrap : flex item will not wrap,this is default.
wrap : flex items will be wrap if space not enough.
wrap-reverse : flex item will wrap in reverse order if applied.
flex-flow : this property in CSS is a shorthand for setting both the flex-direction and flex-wrap property.
align-content : it is used to align flex lines it is same as align item but instead of aligning flex-items it aligns flex lines . It can have different value as center ,flex-start ,flex-end , space-between ,space-evenly,space-around,stretch.
Flex Item
The direct child of flex container become flex items,the most commonly used properties are
order : property specifies the order of the flex items inside the flex container. The first flex item in the code does not have to appear as the first item in the layout.its value should be number it is 0 by default.
flex-grow: this property specifies how much a flex item will grow relative to the rest of the flex items. It’s value must be number ,it is 0 by default.
flex-shrink : this property specify how much flex item will shrink relative to other. It is having default value as 1.
flex-basis : flex-basis specifies initial length of flex item.
flex : A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties.
align-self : align-self property specifies alignment for selected items inside flexible container, it overrides alignment given by align-item property.
Conclusion
You must be feeling confident , familiar with terminologies of flexbox and its most used property. Now it’s your turn to play around with it. Thanks for reading ! I hope you found this blog helpful. Share your thoughts in comments below.