A Complete Guide To CSS Flexbox
2 min read
In this blog, we will deep dive into the concepts of CSS flexbox. This helps us to design flexible responsive layouts. Here, we will see flex container and flex item properties.
So Let's Get Started
🔹 Flex Container Properties
The flex-direction property defines in which direction the container wants to stack the flex items.
The justify-content property is used to align the flex items.
The align-items property is used to align the flex items.
The flex-wrap property specifies whether the flex items should wrap or not.
The align-content property is used to align the flex lines.
🔹 Flex Item Properties
The order property specifies the order of the flex items. The first flex item in the code does not have to appear as the first item in the layout. The order value must be a number, default value is 0.
The align-self property specifies the alignment for the selected item inside the flexible container. It overrides the default alignment set by the container's align-items property.
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items. The value must be a number, default value is 0.
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, default value is 0.
The flex-basis property specifies the initial length of a flex item.
Hope you liked this!
Let's Get Connected 🤝:)