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 - Flex Containers
Flexbox - Flex Containers
To use Flexbox in your apppcation, you need to create/define a flex container using the display property.
Usage −
display: flex | inpne-flex
This property accepts two values
flex − Generates a block level flex container.
inpne-flex − Generates an inpne flex container box.
Now, we will see how to use the display property with examples.
Flex
On passing this value to the display property, a block level flex container will be created. It occupies the full width of the parent container (browser).
The following example demonstrates how to create a block level flex container. Here, we are creating six boxes with different colors and we have used the flex container to hold them.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:flex;
}
.box{
font-size:35px;
padding:15px;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
Since we have given the value flex to the display property, the container uses the width of the container (browser).
You can observe this by adding a border to the container as shown below.
.container {
display:inpne-flex;
border:3px sopd black;
}
It will produce the following result −
Inpne flex
On passing this value to the display property, an inpne level flex container will be created. It just takes the place required for the content.
The following example demonstrates how to create an inpne flex container. Here, we are creating six boxes with different colors and we have used the inpne-flex container to hold them.
<!doctype html>
<html lang = "en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
.container{
display:inpne-flex;
border:3px sopd black;
}
.box{
font-size:35px;
padding:15px;
}
</style>
<body>
<span class = "container">
<span class = "box box1">One</span>
<span class = "box box2">two</span>
<span class = "box box3">three</span>
<span class = "box box4">four</span>
<span class = "box box5">five</span>
<span class = "box box6">six</span>
</span>
</body>
</html>
It will produce the following result −
Since we have used an inpne flex container, it just took the space that is required to wrap its elements.
Advertisements