CSS Flexbox & Properties
Hey There, I am going to start my new blogging journey, as I am learning full stack web development and I will sharing my all learning here. Keep learning Keep Growing :)
What is Flexbox?
Flexbox is the layout that can align the content in rows or columns. By using different properties we can align the content at the start, end& center.
There are mainly two important properties to align the content horizontally and vertically.
Justify-content property can be used to align the content horizontally
align-item property can be used to align the content vertically
1. Justify-Content
Justify-content aligns the text horizontally. There are different properties available to align the container.
Syntax : Justify-content: Properties ;
flex-start--Align the content left side of the container.
flex-end--Align the content right side of the container.
Center--Align the content horizontal center of the container.
Space-between--Item display with equal spaces between them.
Space-around--Item display with equal spaces around them.
2. Align-Items
Align-Items element aligns the text Vertically. There are different properties available to align the container vertically.
Syntax : align-Items: Properties ;
flex-start--Align the content on top of the container.
flex-end--Align the content bottom of the container.
Center--Align the content vertical center of the container.
baseline--Item display baseline of the container.
stretch--Item will stretch to fit in the container.
3. Flex-Direction
This CSS property can use to align the items in the container.There are different that can be used to align the items.
Syntax : flex-direction: Properties ;
row--Items are placed the same as the text direction.
row-reverse-- Items are placed opposite to the text direction.
column--Items are placed top to bottom.
column-reverse--Items are placed from bottom to top.
4. Order
This CSS property can be used to define the order of the items in the container.Order can be(-2,-1,0,1,2).By default, the order for this item should be 0.
Syntax : Order: Properties ;
5. Flex-Wrap
This CSS property can be used to wrap the text for fixing in the container. There are different property was in the flex-wrap.
Syntax: flex-wrap Properties ;
- nowrap--The Item will fix in a single line in the container.
2.wrap--Items will be wrapped to fix in the container.
- wrap-reverse--items will wrap in containers in reverse order.
Thanks for reading...
Happy Coding!
