Flexbox Tutorial
Flexbox Useful Resources
Selected Reading
- Flexbox - Align Self
- Flexbox - Flexibility
- Flexbox - Flex-Order
- Flexbox - Align Content
- Flexbox - Align Items
- Flexbox - Justifying Contents
- Flexbox - Flex-Wrap
- Flexbox - Flex-Direction
- Flexbox - Flex Containers
- Flexbox - Overview
- Flexbox - Home
Flexbox Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Flexbox - Flexibility
Flexbox - Flexibipty
flex-basis
We use the flex-basis property to define the default size of the flex-item before the space is distributed.
The following example demonstrates the usage of the flex-basis property. Here we are creating 3 colored boxes and fixing their size to 150 px.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:150px; }
.box2{background:blue; flex-basis:150px;}
.box3{background:red; flex-basis:150px;}
.container{
display:flex;
height:100vh;
apgn-items:flex-start;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
</span>
</body>
</html>
It will produce the following result −
flex-grow
We use the flex-grow property to set the flex-grow factor. In case of excess space in the container, it specifies how much a particular flex-item should grow.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-grow:10; flex-basis:100px; }
.box2{background:blue; flex-grow:1; flex-basis:100px; }
.box3{background:red; flex-grow:1; flex-basis:100px; }
.container{
display:flex;
height:100vh;
apgn-items:flex-start;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
</span>
</body>
</html>
It will produce the following result −
flex-shrink
We use the flex-shrink property is used to set the flex shrink-factor. In case there is not enough space in the container, it specifies how much a flex-item should shrink.
<!doctype html>
<html lang = "en">
<style>
.box{
font-size:15px;
padding:15px;
}
.box1{background:green; flex-basis:200px; flex-shrink:10}
.box2{background:blue; flex-basis:200px; flex-shrink:1}
.box3{background:red; flex-basis:200px; flex-shrink:1}
.container{
display:flex;
height:100vh;
apgn-items:flex-start;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
</span>
</body>
</html>
It will produce the following result −
flex
There is a shorthand to set values to all these three properties at once; it is called flex. Using this property, you can set values to flex-grow, flex-shrink, and flex-basis values at once. Here is the syntax of this property.
.item {
flex: none | [ < flex-grow > < flex-shrink >? || < flex-basis > ]
}
Advertisements