/    /  CSS FlexBox

CSS FlexBox

 

It is mainly used to make CSS3 capable to change its item’s width and height to best fit all available spaces. It is preferred over the block model.

 

  • Flex container: It is the property of the parent.The display property of an element to either flex or inline-flex.
  • Flex items: It is the property of the children. One or more CSS flex items inside a flex container.

 

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
   display: -webkit-flex;
   display: flex;
   width: 400px;
   height: 200px;
   background-color: lightpink;
}
.flex-item {
   background-color: gray;
   width: 100px;
   height: 100px;
   margin: 10px;
color:white;
}
</style>
</head>
<body>
<div class="flex-container">
 <div class="flex-item">flex item 1</div>
 <div class="flex-item">flex item 2</div>
 <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

 

OUTPUT:

 

tool flex

 

If you want to change the direction of the flex line by using the direction property.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  direction: rtl;
}
.flex-container {
   display: -webkit-flex;
   display: flex;
   width: 400px;
   height: 200px;
   background-color: lightpink;
}
.flex-item {
   background-color: gray;
   width: 100px;
   height: 100px;
   margin: 10px;
color:white;
}
</style>
</head>
<body>
<div class="flex-container">
 <div class="flex-item">flex item 1</div>
 <div class="flex-item">flex item 2</div>
 <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

 

OUTPUT:

 

toolflex