flexbox is to give the container the ability to expand and Shrink elements base on the available space. flexbox Layout replaces float Layout Design New way to build one-Dimensional layouts.
flexbox prefix when writing CSS code.

display:flex;
Flexbox Working Exmple

let start it

flexbox properties:

  1. Flex-direction
  2. flex-wrap
  3. flex-flow
  4. flex-grow
  5. flex-shrink
  6. flex-basis
  7. flex
  8. justify-content
  9. align-content
  10. align-item
  11. order

1.flex-direction:

Flex Direction

Is use flex-direction on the website on
flex-direction provide to direction row or column-wise.

Properties value:

  • row (Default): use Horizontal to direction item to Left to Right
  • row-reverse: use row reverse to change direction to Right to left
  • Column (vertical): use Vertical to direction content item top to bottom
  • column-reverse: column-reverse reverse the direction Bottom to top

Note: Do Not work with inner item

.flex-container {
display: flex;
flex-direction: column;
/* flex-direction: row; */
}

2. flex-wrap:

Flex Warp

some over content overflow in that condition use flex-wrap

flex-warp property value:

  • nowrap: nowrap is default property.
  • warp: try to align the item in the given weight and height.
  • warp-reverse: warp-reverse reverse the order of the item.
.flex-container {
display: flex;
flex-wrap: wrap;
}

3.flex-flow:

the flex-flow shorthand of the flex-direction and flex-wrap.
when using in CSS file:
first, use flex-direction after use flex-wrap.
syntax:

flex-flow: flex-direction flex-wrap;
.flex-container {
display: flex;
flex-flow: row wrap;
}

4. flex-grow:

flex grow

flex-grow work on the child item, not a parent item. flex-grow give equal space and also work on weight.

syntax:

flex-grow:1;

the flex-grow gives value base on a number like 1,2,3….n.

<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-grow: 2">3</div>
<div>2</div>
</div>

5. flex-shrink:

flex-shrink use to create a responsive web layout.

flex-shrink:0; 

no work.but when increase value to zero. than web layout shrink.

<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
</div>

6. flex-basis:

The flex-basic work like max-width.but in max-width fix width size.the flex-basic work with width and space.
Note: flex-basis use to the individual item.

<div class=”flex-container”>
<div>1</div>
<div>2</div>
<div style=”flex-basis: 200px”>3</div>
<div>4</div>
</div>

7. flex:

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

.item {
display: flex;
flex: 1 1 150px;
}

8. justify-content:

justify content in side css

Justify-content properties use for Horizontal Alignment

property value:

  • flex-start: all the items more to Lift side
  • flex-end: flex-end all the items more on the Right side.
  • center: all the item in the center
  • space-around: space-around first and end item move to Coner
  • space-between:
  • space-evenly: space-evenly use for distributing space equally for every item.
.flex-container {
display: flex;
justify-content: center;
/* Write all value */
}

9. align-content:

align-content to use align item to vertical. some time use height and width on the item in that condition data is overflow.

  • Stretch: stretch is a default value
  • flex-start: all the items more to Lift side
  • flex-end: flex-end all the items more on the Right side.
  • center: all the item in the center
  • space-around: space-around first and end item move to Coner
  • space-between:
  • space-evenly: space-evenly use for distributing space equally for every item.
.flex-container {
display: flex;
align-content: space-between;
}

10. align-items:

align-items

align-self use to the individual item. align-self align item to vertical item.

  • Stretch: stretch is a default value
  • flex-start: all the item more to Lift side
  • flex- end: flex-end all the items more on the Right side.
  • center: all the item in the center
  • baseline: baseline work with your font
  • auto: work according to parent
.flex-container {
display: flex;
height: 200px;
align-items: center;
}

11. order:

order in flex box

When using the order property in the flex-box. use to order change the item order according to your requirement.

order: number;
<div class=”flex-container”>
<div>1</div>
<div style=”order: 5">2</div>
<div>3</div>
<div>4</div>
<div style=”order: 2">5</div>
</div>

Note: use margin property enhance your work.


Contact me