Basic concepts of flexbox

Basic concepts of flexbox

The Complete CSS Flex Box Tutorial:-

Flexible Box Module designed as a one-dimensional layout model. Start you flexbox coding a few terms associated with the flex layout model. The two main components its call flex container and flex items.

The browser support for the latest flexbox specification is:

    •  Chrome 29+
    •  Firefox 28+
    •  Internet Explorer 11+
    •  Opera 17+
    •  Safari 6.1+ (prefixed with -webkit-)
    •  Android 4.4+
    •  iOS 7.1+ (prefixed with -webkit-)

Flex Container:- using css display property its call display flex or display inline-flex. Like this.

 .container{ display:flex}
OR
.container{display:inline-flex}

Using Flex Container Properties:

    •  flex-direction
    •  flex-wrap
    •  flex-flow
    •  justify-content
    •  align-items
    •  align-content

Flex-direction properties:-
flex items vertically (from top to bottom):
.flex-container {
  display: flex;
  flex-direction: column;
}

 

 flex items vertically (but from bottom to top):
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

 

 flex items horizontally (from left to right):
.flex-container {
  display: flex;
  flex-direction: row;
}

 flex items horizontally (from left to reverse):
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Flex-wrap properties:-
flex items will wrap:
.flex-container {
  display: flex;
  flex-direction: wrap;
}

 

flex items will wrap:
.flex-container {
  display: flex;
  flex-direction: nowrap;
}

 

flex items will wrap:
.flex-container {
  display: flex;
  flex-direction: wrap-reverse;
}

 

Flex-flow properties:-
Flex items will align one row:
.flex-container {
  display: flex;
  flex-direction: row;
}

Flex items will align one row and wrap:
.flex-container {
  display: flex;
  flex-direction: row wrap;
} 

Justify-content properties:-
Aligns the flex items horizontal center of the flex container:
.flex-container {
  display: flex;
  flex-direction: center;
} 

 

Aligns the flex items left of the flex container (this is default):
.flex-container {
  display: flex;
  flex-direction: flex-start;
}

 

Aligns the flex items right of the flex container:
.flex-container {
  display: flex;
  flex-direction: flex-end;
}

 

Space around to flex items:
.flex-container {
  display: flex;
  flex-direction: space-around;
}

 

Space between to flex items:
.flex-container {
  display: flex;
  flex-direction: space-between;
} 

 

align-items properties:-
Aligns the flex items horizontal center of the flex container:
.flex-container {
  display: flex;
  height: 300px;
  align-items: center;
}

flex items in the top of the container:
.flex-container {
  display: flex;
  height: 300px;
  align-items: flex-start;
} 

flex items in the bottom of the container:
.flex-container {
  display: flex;
  height: 300px;
  align-items: flex-end;
} 

flex items fill  the container:
.flex-container {
  display: flex;
  height: 300px;
  align-items: stretch;
} 

 

flex items baseline alignment  the container:
.flex-container {
  display: flex;
  height: 300px;
  align-items: baseline;
}

Flex-align-content properties:-
flex items equal space between the container:
.flex-container {
  display: flex;
  height: 800px;
  align-items: wrap;
  align-items: space-between;
} 

flex items equal space around the container:
.flex-container {
  display: flex;
  height: 800px;
  align-items: wrap;
  align-items: space-around;
}

flex items equal space between the container:
.flex-container {
  display: flex;
  height: 800px;
  align-items: wrap;
  align-items: stretches;
}

flex items stretches the container (this is default):
.flex-container {
  display: flex;
  height: 800px;
  align-items: wrap;
  align-items: flex-start;
}

flex items equal space between the container:
.flex-container {
  display: flex;
  height: 800px;
  align-items: wrap;
  align-items: flex-end;
} 

Using Flex Container Properties:

    •  order
    •  flex-grow
    •  flex-shrink
    •  flex-basis
    •  flex
    •  align-self

Flex items order properties
Order property controls the order in which children of a flex container appear inside the flex container. Without restructuring the HTML code.
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}
.flex-container div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

 

 

flex-grow Property:-
The flex-grow property difines how much a flex item should grow space available.
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

 

 

flex-shrink Property:-
flex-shrink property work on opposite of flex-grow property, its call to how much a square is allowed to shrink.
.square {
  flex-shrink:1;
}
.square.three {
  Flex-shrink:0;
}

 

  

flex-shrink Property:-
flex is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties