flex in css

What is flex property in CSS ?

Flexbox is not a single property, it’s a whole module. Flex box is refer to the flexible box module. It was designed as a  one-dimensional layout model. It has a lot of thinks including its whole set of properties. In this article we will discuss about the flex property in CSS.

Flex make it easy to design flexible and mobile friendly layout. When we use flex, we deals with layout in one-dimension at a time. either we can work with row or column.

Basics and terminology

Let’s understand the basic terminology that is common in flexbox. Whenever, we work with flexbox we need to think in terms of two axes. First is the “main axis” from main-start to main-endand the “cross axis” from cross-start to crosse -end.

The main-axis

The main-axis is primary axis depends on the flex-direction property. It has four possible values as.

  • row
  • roe-reverse
  • column
  • column-reverse

If you choose row or row-reverse your main axis will run along the row in the inline direction.

If Choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction.

The cross axis

The cross axis runs perpendicular to the main axis. It depends main-axis direction.

If you choose row or row-reverse your main axis will run from the top of the page to the bottom — in the block direction.

If flex-direction is set to row then the cross axis runs in the block direction.

If your main axis is column or column-reverse then the cross axis runs along the rows.

flex Css

Flex property in css

The flex property can be use one, two, or three values.

  • When there is the one-value syntax, the value can be either be a number or the keywords. Such as none, auto, or initial.
  • When there is the two-value syntax. The first value must be a number which use as flex-grow. The second value can either be a number which we use for flex-shrink or a valid width value used as flex-basis.
  • When there is three-value syntax, then the values must follow the order: a number for the flex-grow, a number for the flex-shrink, and a valid width value for flex-basis.

Syntax

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

Property values

display:

The display property used to display behavior of an element, the type of rendering box. It has different values Such as:

 {display: none;}
 {display: inline;}
 {display: block;}
 {display: inline-block;}
{display: flex;}
{display: grid;}
{
display:flex;
}

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children. l

Let’s take an example to create a container using display:flex property.

HTML:

<div id="main">
  <div style="background-color:#da2912;"></div>
  <div style="background-color:#fdee18e4;"></div>
  <div style="background-color:#1bf6c7;"></div>
  <div style="background-color:#11c48e;"></div>
  <div style="background-color:#1247f675;"></div>
  <div style="background-color:#9b12f675;"></div>
  <div style="background-color:#d412f675;"></div>
  <div style="background-color:#f6121d75;"></div>
</div>

CSS:

#main {
  width: 600px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 100px;
}

As a Result:

flex Css

Flex-grow:

The Flex-grow property determines,  “how much the item will grow as compare to the rest of the flexible items inside the same container”. Remember if the element is not flexible than the flex-grow property never work.

Syntax:

flex-grow: number|initial|inherit;

For Example:

HTML

<body>

<h1>The flex-grow Property</h1>

<div id="main">
  <div style="background-color:#da2912;"></div>
  <div style="background-color:#fdee18e4;"></div>
  <div style="background-color:#1bf6c7;"></div>
  <div style="background-color:#11c48e;"></div>
  <div style="background-color:#1247f675;"></div>
  <div style="background-color:#9b12f675;"></div>
  <div style="background-color:#d412f675;"></div>
  <div style="background-color:#f6121d75;"></div>
</div>


</body>

CSS

#main {
  width: 600px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 4;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
#main div:nth-of-type(6) {flex-grow: 1;}
#main div:nth-of-type(7) {flex-grow: 1;}
#main div:nth-of-type(8) {flex-grow: 1;}

As a Result:

flex Css

flex-shrink:

The Flex-shrink property determines,  “how much the item will shrink as compare to the rest of the flexible items inside the same container”. Remember if the element is not flexible than the flex-shrink property never work.

syntax:

flex-shrink: number|initial|inherit;

For Example:

HTML:

<body>

<h1>The flex-shrink Property</h1>

<div id="main">
  <div style="background-color:#da2912;"></div>
  <div style="background-color:#fdee18e4;"></div>
  <div style="background-color:#1bf6c7;"></div>
  <div style="background-color:#11c48e;"></div>
  <div style="background-color:#1247f675;"></div>
  <div style="background-color:#9b12f675;"></div>
  <div style="background-color:#d412f675;"></div>
  <div style="background-color:#f6121d75;"></div>
</div>
</body>

CSS:

    #main {
  width: 600px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

#main div:nth-of-type(2) {
  flex-shrink: 4;
}

As A result:

flex Css

flex-basic:

The flex-basic define the initial length of a flexible item. The length of the element is relative or absolute units that defines the initial length of the flex-item. The values of elements can be auto, inherit, or a number followed by the length units such as em, px, etc.

Syntax:

flex-basis: number|auto|initial|inherit;

HTML

<h1>The flex-basis Property</h1>

<div id="main">
  <div style="background-color:#da2912;"></div>
  <div style="background-color:#fdee18e4;"></div>
  <div style="background-color:#1bf6c7;"></div>
  <div style="background-color:#11c48e;"></div>
  <div style="background-color:#1247f675;"></div>
  <div style="background-color:#9b12f675;"></div>
  <div style="background-color:#d412f675;"></div>
  <div style="background-color:#f6121d75;"></div>
</div>

CSS:

#main {
  width: 600px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50px;
}

#main div:nth-of-type(2) {
  flex-basis: 100px;
}

As a Result:

flex Css

auto: This value of the flex property is equivalent to 1 1 auto.

none: This value of the flex property is equivalent to 0 0 auto. It neither grows nor shrinks the flex-items.

initial: It sets the property to its default value. It is equivalent to 0 0 auto.

inherit: It inherits the property from its parent element.

Hey, guys hope it helps. if you have any query regarding this you can ask in comment section.

Recommended Posts:

Java Basic interview questions and answers .

CSS position property

Box shadow effect in css

Reference:

www.javapoint.com

Leave a Reply

Your email address will not be published. Required fields are marked *