CSS Flexbox
CSS flexbox is a one-dimensional layout method that uses rows & columns to place the flex items.The flex items expand or shrink to fit the smaller spaces.
Flex container: The flex container refers to the properties of the parent. It is declared by assigning the display property of an element to either flex or inline-flex.
Flex items: Flex item is basically the children of the flex container. A flex container contains more than one flex item.
Followings are the flex properties:
flex-direction,flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
The flex-direction Property
The flex-direction property is used to show the flex item alignment direction. By default flex-direction is row.
Followings are the flex direction properties:
flex-direction: row;,flex-direction: row-reverse;,flex-direction: column;,flex-direction: column-reverse;
The flex-direction: row value displays the flex items horizontally(from left to right).
Source Code
.flex-container {
display: flex;
flex-direction: row;
}
flex-direction: row-reverse
The flex-direction: row-reverse value displays the flex items horizontally(from right to left).
Source Code
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-direction: column
The flex-direction: column value displays the flex items vertically (from top to bottom).
Source Code
.flex-container {
display: flex;
flex-direction: column;
}
Flex Shrink Property
The flex-shrink property of the flex item specifies the ability to shrink the flex item relative to the rest of the flex items. The default value of flex-shrink is 1. The value can be any positive value.
Source Code
<div class="flex-container">
<div class="flex-item bg-info">1</div>
<div class="flex-item bg-primary">2</div>
<div class="flex-item bg-warning" style="flex-shrink: 0">3</div>
<div class="flex-item bg-warning">4</div>
<div class="flex-item bg-info">5</div>
</div>
Source Code: Output
flex-direction: column-reverse
The flex-direction: column-reverse value displays the flex items vertically (from bottom to top).
Source Code
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Flex Wrap
Flex wrap is used to display the flex item either in one row or multiple rows. It has the followings properties.
nowrap(default)wrap(wrap in next line)wrap-reverse(multiple line but in reverse from bottom to top).
flex-wrap: nowrap
nowrap – It is used to display flex items in one row. Please keep in mind that ,this is the by default behaviour.
Source Code
.flex-container {
display: flex;
flex-wrap: nowrap;
}
flex-wrap: wrap
wrap–This property is used to display flex items into multiple lines and items will wrap from top to bottom.
Source Code
<style type="text/css">
.flex-container {
display: flex;
flex-wrap: wrap;
}
</style>
flex-wrap: wrap-reverse
wrap-reverse-Flex items will try to wrap in reverse direction means bottom to top.
Source Code
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
The Flex Flow Property
It is a shorthand property of flex-direction and flex-wrap properties.
Source Code
.flex-container {
display: flex;
flex-flow: row wrap;
}
Horizontal Alignment Of Flex Item
Please keep in mind that by default flex-direction is row.
The justify-content Property
The justify-content property is used to align the flex items along the horizontal direction or on the main axis or on the x-axis.
Followings are the value of justify-content property:
justify-content: center,justify-content: flex-start,justify-content: flex-end,justify-content: space-around,justify-content: space-between
justify-content: center
The justify-content: center value is used to align the flex item to the center of the main-axis or x-axis or horizontal direction.
Source Code
.flex-container {
display: flex;
justify-content: center;
}
justify-content: start
The justify-content: flex-start value is used to align the flex item to the beginning of the main-axis or x-axis or horizontal direction. Please keep in mind that this is the default value of justify-content.
Source Code
.flex-container {
display: flex;
justify-content: flex-start;
}
justify-content: flex-end
The justify-content: flex-end value is used to align the flex item to the end of the main-axis or x-axis or horizontal direction.
Source Code
.flex-container {
display: flex;
justify-content: flex-end;
}
justify-content: space-around
The justify-content: space-around value is used to align flex item with space before, between, and after the lines along the main-axis or x-axis or horizontal direction.
Source Code
.flex-container {
display: flex;
justify-content: space-around;
}
justify-content: space-between
The justify-content: space-between value is used to align flex item space between the lines along the main-axis or x-axis or horizontal direction.
Source Code
.flex-container {
display: flex;
justify-content: space-between;
}
The align items Property
The align-items property is used to align the flex items along the cross axis(perpendicular to main axis) or y-axis or vertical to the main axis. Please keep in mind that align-items is the property of the flex container.
The align-self property is used to align the individual flex item along the cross axis or Y-axis. Please keep in mind that align-self is the property of the flex item.
Followings are the value of align-items:
flex-startcenterflex-endstretchbaseline
align-items:flex-start
The align-items:flex-start value is used to place flex items at the start of the cross axis or Y-axis or vertical to main axis(x-axis).
Source Code
.flex-container {
display: flex;
align-items: flex-start;
}
align-items: center
The align-items: center value is used to place flex items at the center of the cross axis or Y-axis or vertical to the main axis(x-axis).
Source Code
.flex-container {
display: flex;
align-items: center;
}
align-items: flex-end
The align-items: flex-end value is used to place flex items at the end of the cross-axis or Y-axis or vertical to the main axis(x-axis) with equal amounts of free space at both ends.
Source Code
<style type="text/css">
.flex-container {
display: flex;
align-items: flex-end;
}
</style>
align-items: stretch
The align-items: stretch value is used to fill the current row or column unless prevented by the minimum and maximum width or height. Please keep in mind that this is the default value of align-items.
Source Code
.flex-container {
display: flex;
align-items: stretch;
}
align-items: baseline
The align-items: baseline value is used to align each flex item with the baseline of the flex item with the largest font size.
Source Code
<style type="text/css">
.flex-container {
display: flex;
align-items: baseline;
}
</style>
The align-content Property
The align-content property is used to align the flex lines of the flex container along the main axis.
Followings are the value of align-content:
stretch, center, space-around , space-between space-evenly , flex-start , flex-end.
align-content: stretch
The align-content: stretch value is used to stretch the flex lines to take up the remaining space. This is the default value of align-content.
Source Code
<style type="text/css">
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
</style>
align-content: flex-start
The align-content: flex-start value is used to display the flex lines at the start of the flex container.
Source Code
<style type="text/css">
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
</style>
align-content: center
The align-content: center value is used to display the flex lines at the center of the flex container.
Source Code
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
align-content: flex-end
The align-content: flex-end value is used to display the flex lines at the end of the flex container.
Source Code
.flex-container{
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
align-content:space-between
The align-content:space-between value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them. There will be no extra space before the first flex item and after the last flex item.
Source Code
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
align-content:space-around
The align-content:space-around value is used to align the flex items along the main axis in such a way that each item has an equal amount of space around it.
Source Code
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
align-content:space-evenly
The align-content:space-evenly value is used to align the flex items along the main axis in such a way that every two successive items have equal spaces in between them
There will be no extra space before the first flex item and after the last flex item. So, the space on the left & right sides of each item should be equal to the width of the item.
Source Code
.flexbox-container {
display: flex;
flex-wrap: wrap;
align-content:space-evenly;
}
Web Tutorials
