Tekane Chaitanya
Chaitanya Tekane

Follow

Chaitanya Tekane

Follow
A Complete Guide To CSS Flexbox

A Complete Guide To CSS Flexbox

Tekane Chaitanya's photo
Tekane Chaitanya
ยทJul 24, 2021ยท

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

1. flex-direction

The flex-direction property defines in which direction the container wants to stack the flex items. Screenshot (443).png Screenshot (445).png Screenshot (447).png

2. justify-content

The justify-content property is used to align the flex items. Screenshot (449).png Screenshot (451).png

3. align-items

The align-items property is used to align the flex items. Screenshot (453).png Screenshot (455).png Screenshot (457).png

4. flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not. Screenshot (461).png Screenshot (463).png

5. align-content

The align-content property is used to align the flex lines. Screenshot (471).png Screenshot (473).png Screenshot (475).png

๐Ÿ”น Flex Item Properties

1. order

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. Screenshot (477).png

2. align-self

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. Screenshot (480).png Screenshot (482).png

3. flex-grow

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. Screenshot (484).png Screenshot (486).png

4. flex-shrink

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. Screenshot (488).png

5. flex-basis

The flex-basis property specifies the initial length of a flex item. Screenshot (490).png

Hope you liked this!

Let's Get Connected ๐Ÿค:)

ย 
Share this