Scribd
Upload
16 views

CSS Flex box _ everything you need to know about flex box - DEV Community

The document provides a comprehensive overview of CSS Flexbox, explaining its purpose as a layout model that allows for efficient management of container items, making websites responsive. It details how to implement Flexbox by setting the display property to 'flex' and outlines key properties such as flex-direction, flex-wrap, justify-content, and align-items, which control the layout and alignment of items. Additionally, it covers item-specific properties like flex-grow, flex-shrink, and align-self to customize individual item behavior within the flex container.

Uploaded by

raheelkr2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

CSS Flex box _ everything you need to know about flex box - DEV Community

The document provides a comprehensive overview of CSS Flexbox, explaining its purpose as a layout model that allows for efficient management of container items, making websites responsive. It details how to implement Flexbox by setting the display property to 'flex' and outlines key properties such as flex-direction, flex-wrap, justify-content, and align-items, which control the layout and alignment of items. Additionally, it covers item-specific properties like flex-grow, flex-shrink, and align-self to customize individual item behavior within the flex container.

Uploaded by

raheelkr2003
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Flex box : everything you need to know

about flex box


#css #html #beginners #webdev
Hey, welcome. If you are here, you must have heard about flex box in CSS or you
already know what is flex box. But, What exactly Flex box is ?
What is Flex Box ?
Flex box layout provide us a more efficient way to manage items of a particular
container. Flex box layout align, shrink items or make space among items by
occupying the given space, and make the website responsive.
How to use flex box ?
Well to use flex box you just have to set container element's display property to
flex .display: flex; will enable all flex box feature to this container.
.container{
display: flex;
}

Let see some flex box properties that you can


use.
i)Flex-direction: This property is for parent. It allows us to set or change item's
direction. Like

ii)Flex-wrap : This is also for parent element. It allow you to wrap the items and
prevent overflow.

iii)
Flex-flow : This is the shorthand for flex-direction and flex-wrap . The default
value is :
.container{
flex-flow: row nowrap;
}

You can see the first value for this property id


flex-direction and second is for
flex-wrap.
iv) justify-content : It is the most common and frequently used property. It is used
to align items in the x axis or horizontal axis.

v) align-items : It is also a common and frequently used property. It is used to align


items in Y axis or vertical axis.
Note : If you have flex-direction: column | column-reverse then justify-
content and align-itemsalign items in Y and X axis respectively.
All properties above are for parent element. Now, let's talk about item's property.
vi) flex-grow : As the name suggests flex-grow is used to increase or grow item's
width in proportion to occupy the space.

vii) flex-shrink : Yes, you guessed right. This property aim is opposite to
flex-
grow . It shrinks or decrease the width of item in proportions to occupy the space.
viii) : This defines the default size of an element before distributing the
flex-basis
space among items. You can give fixed lengths like(100px, 20rem) or you can use
auto value. means take value from
auto property.
width and height

xi) flex : This is a shorthand for flex grow, flex shrink and flex basis .
flex: <flex-grow> <flex-shrink> flex-basis>;

x) align-self: This property allow to align item individually. You can set different
align position for each item.

So, that's it about flex box. I hope you understood each and everything. If you have
doubt or I missed some point let me know in the comments.
Thanks For reading.

You might also like