How to set the size of specific flex-item using CSS?
Last Updated :
23 Apr, 2021
CSS provides Flexible box layout module, also known as flexbox, which makes it easier to design flexible responsive layout. To start using a flexbox model, we need to first define a flex container and the direct child elements of the container are called flex items.
Flex has following pre-defined properties in order to change the size of the flex items.
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Syntax:
flex-item: order | flex-grow | flex-shrink |
flex-basis | auto | align-self |
flex | initial | inherit;
Sample code:
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div >A</ div >
< div >B</ div >
< div >C</ div >
</ div >
</ body >
</ html >
|
Output:
1. order: This property can be used to specify the order of the flex items.
Example: Below code illustrates the use of flex order.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div style = "order: 2" >A</ div >
< div style = "order: 3" >B</ div >
< div style = "order: 1" >C</ div >
</ div >
</ body >
</ html >
|
Output:
2. flex-grow: This property can be used to specify how much an item can grow relative to other items in the container.
Example: Below code illustrates the use of flex-grow property value.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 80%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div style = "flex-grow: 1" >A</ div >
< div style = "flex-grow: 3" >B</ div >
< div style = "flex-grow: 6" >C</ div >
</ div >
</ body >
</ html >
|
Output:
3. flex-shrink: This property can be used to specify how a much an item can shrink relative to other items in the container. Its default value is 1.
Example: Below code illustrates the use of flex-shrink property value.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div >A</ div >
< div style = "flex-shrink: 0" >B</ div >
< div >C</ div >
< div >D</ div >
< div >E</ div >
< div >F</ div >
</ div >
</ body >
</ html >
|
Output:
4. flex-basis: This property can be used to specify the initial length of an item in the flex container.
Example: Below code illustrates the use of flex-basis.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div >A</ div >
< div style = "flex-basis: 250px" >B</ div >
< div >C</ div >
</ div >
</ body >
</ html >
|
Output:
5. flex: This property is a compilation of flex-grow, flex-shrink and flex-basis. You can specify all the three properties within flex.
Example: Below code illustrates the use of flex.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div >A</ div >
< div style = "flex: 2 0 200px" >B</ div >
< div >C</ div >
</ div >
</ body >
</ html >
|
Output:
6. align-self: This property can be used to specify the alignment of the selected element. When defined, it overrides the alignment defined by the container. It takes values: center, flex-start or flex-end.
Example: Below code illustrates the use of flex align-self property value.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</ style >
</ head >
< body >
< div class = "flex-container" >
< div style = "align-self: flex-start" >A</ div >
< div style = "align-self: center" >B</ div >
< div style = "align-self: flex-end" >C</ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...