Home >>CSS Tutorial >CSS Flexbox

CSS Flexbox

CSS Flexbox

The CSS flexbox property is used to make the combination of flex-grow, flex-shrink, and flex-basis property when they are used with different screen sizes. It provide the much efficient way to layout and much responsive mobile friendly. The flex property is used to set the length of the flexible items. If you use CSS flexbox property it is easy to positioning the main container and the child elements. It is a new layout mode in CSS3.

Syntax:

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

CSS Flexbox Properties

These are the following flexbox properties:

Property Description
display It s used to define the type of box used for an html element.
flex-direction It is used to define the direction inside a flex container of the flexible items.
justify-content It is used to define the alignment of the flex items horizontally when the items do not use the space available in the main-axis.
Align-items It is used to specify the vertical alignment of the flex items when the items do not use the space available in the cross-axis.
flex-wrap The flex-wrap defines that whether the flex items should wrap or not, if there is not enough room for them on one flex line.
align-content It is most similar to align items, but instead of aligning flex items, it align the flex lines. It can be used to modify the behavior of the flex wrap property.
flex-flow It is used to specifies a shorthand property for flex-wrap and flex-direction.
order It is used to specifies the order of a flexible item relative to the rest of the flex items inside the same container.
align-self It can be overrides the container’s align-items property. Align-self is used on flex-items.
flex It can be used to specify a shorthand property and the length of the flex items , and the flex-basis properties.

CSS Flexbox Values

value Description
flex-grow It specify that how much items will grow relative to the rest of the flexible items.
flex-shrink It specify that how much items will shrink relative to the rest of the flexible items.
flex-basis : It can be used sets the length of items. The flexbox containing the values, auto, inherit, or a number followed by %, em, px, etc.

flex-grow

Let's take an Example of the flex-grow:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container1 {
  display: flex;
  align-items: stretch;
  background-color: #000;
}
.flex-container1 > div.flexgrow {
  background-color: #73cbfa;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-grow Property</h1>
<p>The third flex item grow seven times faster than the other flex items:</p>
<div class="flex-container1" >
  <div class="flexgrow" style="flex-grow: 1"></div>
  <div class="flexgrow" style="flex-grow: 1">2</div>
  <div class="flexgrow" style="flex-grow: 7">3</div>
</div>
</body>
</html>
Output:

Flex-grow Property

The third flex item grow seven times faster than the other flex items:

 
2
3

Flex-Shrink

Let's take an Example of the flex-shrink:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container2 {
  display: flex;
  align-items: stretch;
  background-color: #000;
}
.flex-container2>div.flexshrink {
  background-color: #73cbfa;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>
<p>The seven flex item do not shrink as much as the other flex items:</p>
<div class="flex-container2">
  <div class="flexshrink">1</div>
  <div class="flexshrink">2</div>
  <div class="flexshrink">3</div>
  <div class="flexshrink"> 4</div>
  <div class="flexshrink">5</div>
  <div class="flexshrink">6</div>
  <div class="flexshrink" style="flex-shrink: 0">7</div>
  <div class="flexshrink">8</div>
  <div class="flexshrink">9</div>
  <div class="flexshrink">10</div>
</div>
</body>
</html>
Output:

Flex-shrink Property

The seven flex item do not shrink as much as the other flex items:

1
2
3
4
5
6
7
8
9
10

flex-basis

Let's take an Example of the flex-basis:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container3 {
  display: flex;
  align-items: stretch;
  background-color: #000;
}
.flex-container3 > div.flexbasis {
  background-color: #73cbfa;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flex-basis Property</h1>
<p>It Sets the initial length of the second flex item to 180 pixels:</p>
<div class="flex-container3">
  <div class="flexbasis">1</div>
  <div class="flexbasis" style="flex-basis:180px">2</div>
  <div class="flexbasis">3</div>
  <div class="flexbasis">4</div>
</div>
</body>
</html>
Output:

Flex-basis Property

It Sets the initial length of the second flex item to 180 pixels:

1
2
3
4

Popular Tutorials