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:

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:

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:

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads