Flexbox Layout:
The Flexbox is the layout module which helps us to design responsive layouts much more easily and efficiently. Flexbox provides us with a variety of alignment features that can be used using various Flexbox Properties.
Structure of Flexbox:
Flexbox is a module which consists of many things and various properties that are used on the parent element known as the "flex container" and its children known as the "flex items".
main axis: The main axis is the primary axis of the flex container, the flex items within the container are arranged according to the Main Axis which can be horizontal or vertical depending upon the
flex-directionproperty.main start | main end: The main start defines the starting point of the container and the main end defines its ending point. The flex items are arranged within the container starting from the main start and moving towards the main end. It can also be changed using a variety of properties.
main size: The main size is the width or height that we provide to the flex container and the flex items within it depending on the main axis. We use
width: ;orheight: ;property to define the main size of the flex container and the flex items.cross axis: The cross axis is the axis perpendicular to the main axis. The direction of the cross axis varies according to the direction of the main axis.
cross start | cross end: The cross start defines the cross starting point of the container and the cross end defines its cross ending point which is perpendicular to the main axis. Lines that surround the flex item within the container start from the cross start moving towards the cross end.
cross size: The cross size is the perpendicular width or height that we apply to the flex container and the flex items within it depending on the cross axis. We use
width: ;orheight: ;property to define the cross size of the flex container and the flex items.
Flexbox Properties:
Properties for the Parent | flex container:
display: The display: ; property defines the state of the parent element (flex container) and activates all the flex features for its children (flex items).
Syntax:
.container {
display: flex | inline-flex;
}
flex-direction: The flex-direction: ; property defines the main axis of the flex container and the direction in which the flex items are set to be arranged.
Syntax:
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row The flex items are arranged horizontally from left to right.
Example:
row-reverse The flex items reverse their positions and are arranged horizontally from right to left.
Example:
column The flex items are arranged vertically from top to bottom.
Example:
column-reverse The flex items reverse their positions and are placed vertically from bottom to top.
Example:
flex-wrap: The flex items are placed in a single line by default, with the help of flex-wrap: ; property we can make the flex items to wrap inside the container.
Syntax:
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap This is the default value in which the flex items are placed in a single line.
Example:
wrap The flex items will wrap the flex container and lineup in multiple lines from top to bottom.
Example:
wrap-reverse The flex items will wrap the flex container and lineup reversely in multiple lines from bottom to top.
Example:
flex-flow: The flex-flow: ; is the shorthand property for the flex-direction: ; and the flex-wrap: ;. We can simply combine these properties using the flex-flow: ; property.
Syntax:
.container {
flex-flow: row wrap;
}
justify-content: The justify-content: ; property is used to align the flex items in the line within the main axis. We can also customize the space between the flex items and arrange them in accordance with the flex container by using this property.
Syntax:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start The flex items are arranged at the starting point of the flex container depending on the flex-direction.
Example:
flex-end The flex items are arranged at the end point of the flex container depending on the flex-direction.
Example:
start The flex items are arranged at the starting point of the flex container depending on the writing-mode.
end The flex items are arranged at the end point of the flex container depending on the writing-mode.
center The flex items get arranged in the center of the flex container.
Example:
space-between The flex items in the line are uniformly distributed from the starting point to the end point.
Example:
space-around The flex items in the line get equal space on both sides of the main axis and are uniformly distributed within the container.
Example:
space-evenly The flex items in the line are evenly distributed from start to end, including the edges that match the space in each item.
Example:
align-items: The align-items: ; property is used to align the flex items in the line within the cross axis. This property acts just like justify-content: ; but within the axis which is perpendicular to the primary axis.
Syntax:
.container {
align-items: flex-start | flex-end | center | baseline;
}
flex-start The flex items are arranged at the starting point in the cross axis of the flex container, depending on the flex-direction.
Example:
flex-end The flex items are arranged at the end point in the cross axis of the flex container, depending on the flex-direction.
Example:
start The flex items are arranged at the starting point in the cross axis of the flex container, depending on the writing-mode.
end The flex items are arranged at the end point in the cross axis of the flex container, depending on the writing-mode.
center The flex items get arranged in the center of the cross axis within the container.
Example:
baseline The flex items are arranged in a way that their baselines match each other.
Example:
align-content: The align-content: ; property is used to align multiple lines of flex items within the cross axis. We can customize the space between the multiple lines of flex items and arrange them to fit the flex container by using this property.
Syntax:
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}
flex-start The multiple lines of flex items are arranged at the starting point of the flex container depending on the flex-direction.
Example:
flex-end The multiple lines of flex items are arranged at the end point of the flex container depending on the flex-direction.
Example:
start The multiple lines of flex items are arranged at the starting point of the flex container depending on the writing-mode.
end The multiple lines of flex items are arranged at the end point of the flex container depending on the writing-mode.
center The flex items get arranged in the center of the flex container.
Example:
space-between The lines of the flex items are uniformly distributed from the starting point to the end point.
Example:
space-around The lines of the flex items get equal space on both sides of the cross axis and are uniformly distributed within the container.
Example:
space-evenly The lines of the flex items are evenly distributed from start to end, including the edges that match the space between the two lines.
Example:
stretch The lines stretch themselves to fill the remaining area of the flex container.
Example:
gap | row-gap | column-gap: The gap: ; | row-gap: ; | column-gap: ; property is used to manually apply the space between the flex items in the container. The row-gap: ; is used to set the gap within the row and the column-gap: ; is used to set the gap within the column. We can also use the gap: ; as a shorthand property for the row-gap: ; and the column-gap: ;.
Syntax:
.container {
gap: 30px;
row-gap: 30px;
column-gap: 20px;
gap: 30px 20px;
}
Example:
Properties for the Child | flex item:
order: The order: ; property is used to customize and change the display order of flex items within the flex container.
Syntax:
.item {
order: 3;
}
Example:
flex-grow: The flex-grow: ; property is used to grow the size of the flex item in comparison to the rest of the flex items present in the container. The default value for flex-grow: ; is 0.
Syntax:
.item {
flex-grow: 2;
}
Example:
flex-shrink: The flex-shrink: ; property is used to shrink the size of the flex item in comparison to the rest of the flex items present in the container. The size of the flex item shrinks depending on the screen size and improves the responsiveness of the web page. The default value for flex-shrink: ; is 1.
Syntax:
.item {
flex-shrink: 2;
}
Example:
flex-basis: The flex-basis: ; property is used to define the width or height of the flex item. We use numerical values to define the initial main size of the flex item or a variety of keywords that have been made available to us.
auto The flex item automatically refers to the size which is given in width: ; or height: ; property.
content The flex item adapts the size to fit the content inside it.
Syntax:
.item {
flex-basis: 200px | auto | content;
}
flex: The flex: ; is the shorthand property for the flex-grow: ;, flex-shrink: ; and the flex-basis: ;. We can merge these properties using the flex: ; property and make the code more readable.
Syntax:
.item {
flex: 0 1 auto;
}
align-self: The align-self: ; property is used to individually align the flex items in the line within the cross axis. This property acts just like align-items: ; but allows us to target specific flex items.
Syntax:
.item {
align-self: flex-start | flex-end | center | baseline | stretch;
}
flex-start The flex item is placed at the starting point in the cross axis of the flex container, depending on the flex-direction.
Example:
flex-end The flex item is placed at the end point in the cross axis of the flex container, depending on the flex-direction.
Example:
start The flex item is placed at the starting point in the cross axis of the flex container, depending on the writing-mode.
end The flex item is placed at the end point in the cross axis of the flex container, depending on the writing-mode.
center The flex item is placed in the center of the cross axis within the container.
Example:
baseline The flex item is placed to match the baseline of the flex container within the cross axis. The first baseline places the item at the starting point of the flex container. The last baseline places the item at the end point of the flex container.
Example:
stretch The flex item stretches to fill the remaining area of its cross axis.
Example:
Reference:
Thank you!