CSS Flexbox is a powerful layout system that has revolutionized the way developers approach web design. It allows developers to create flexible, responsive layouts with ease, without resorting to complicated code or hacks.
In this blog, we’ll explore some of the key Flexbox properties that can help you create dynamic layouts and improve the user experience on your website.
1.Display Property
To use Flexbox, you need to define a flex container. This is done by setting the display property of the parent element to either flex or inline-flex. This property activates the Flexbox layout for all child elements within the container.
.container {
display: flex;
}
2.Flex Direction
The flex-direction property determines the main axis along which the flex items will be laid out. It can be set to row, row-reverse, column, or column-reverse.
.container {
display: flex;
flex-direction: row;
}
row(default): items are laid out horizontally, from left to right.row-reverse: items are laid out horizontally, from right to left.column: items are laid out vertically, from top to bottom.column-reverse: items are laid out vertically, from bottom to top.
3.Justify Content
The justify-content property aligns the flex items along the main axis. It can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.
.container {
display: flex;
justify-content: center;
}
flex-start(default): items are aligned to the start of the container.flex-end: items are aligned to the end of the container.center: items are centered within the container.space-between: items are evenly spaced out along the main axis, with no space at the start or end.space-around: items are evenly spaced out along the main axis, with space at the start and end.space-evenly: items are evenly spaced out along the main axis, with equal space at the start and end.
4.Align Items
The align-items property aligns the flex items along the cross axis. It can be set to flex-start, flex-end, center, baseline, or stretch.
cssCopy code.container {
display: flex;
align-items: center;
}
flex-start: items are aligned to the start of the container.flex-end: items are aligned to the end of the container.center: items are centered within the container.baseline: items are aligned to their baselines.stretch(default): items are stretched to fill the container along the cross axis.
5.Flex Wrap
The flex-wrap property determines whether the flex items should wrap or not when there is not enough space. It can be set to nowrap, wrap, or wrap-reverse.
.container {
display: flex;
flex-wrap: wrap;
}
nowrap(default): items are not allowed to wrap.wrap: items are allowed to wrap onto multiple lines.wrap-reverse: items are allowed to wrap onto multiple lines in reverse order.
6.Align Content
The align-content property aligns the flex lines when there is extra space on the cross axis. It can be set to flex-start, flex-end, center, space-between, space-around, or stretch.
.container {
display: flex;
align-content: center;
}
flex-start: flex lines are packed at the start of the container.flex-end: flex lines are packed at the end of the container.center: flex lines are centered within the container.space-between: flex lines are evenly spaced out along the cross axis, with no space at the start or end.space-around: flex lines are evenly spaced out along the cross axis, with space at the start and end.stretch(default): flex lines are stretched to fill the container along the cross axis.
7.Flex Grow
The flex-grow property specifies how much a flex item should grow relative to the other flex items in the container. It takes a unitless value as a parameter.
.item {
flex-grow: 1;
}
The default value is 0, which means the item will not grow. If you set it to 1, the item will grow to fill any available space. If you set it to a higher value, the item will take up more space relative to the other items.
8.Flex Shrink
The flex-shrink property specifies how much a flex item should shrink relative to the other flex items in the container. It takes a unitless value as a parameter.
.item {
flex-shrink: 1;
}
The default value is 1, which means the item will shrink if there is not enough space. If you set it to 0, the item will not shrink. If you set it to a higher value, the item will shrink more relative to the other items.
9.Flex Basis
The flex-basis property specifies the initial size of a flex item before any remaining space is distributed. It takes a length value as a parameter.
.item {
flex-basis: 200px;
}
The default value is auto, which means the item will take its content size as its basis. If you set it to a specific length value, the item will have that initial size.
10.Flex
The flex shorthand property combines flex-grow, flex-shrink, and flex-basis into a single property. The values are specified in that order, separated by spaces.
.item {
flex: 1 1 200px;
}
This is equivalent to:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}
11.Order
The order property specifies the order in which the flex items are displayed within the container. It takes an integer value as a parameter.
.item {
order: 2;
}
The default value is 0. Items with a lower order value will be displayed before items with a higher order value.
11.Example
Certainly! Here's an example code snippet that utilizes all the Flexbox properties.
12.Conclusion
Flexbox is a powerful tool for creating flexible and responsive layouts. By understanding these key Flexbox properties, you can create complex designs with ease. Remember to experiment with different values to find the perfect layout for your website.
So thats all for today, hope you liked it. Will be covering more concepts in the forthcoming blogs.
Stay Tuned !
