what is flexbox?

the flexible box module, usually called as flexbox. we can build a responsive website with help of the flexbox. there are 4 types of layout modes. block, inline, positioned and table.

block :

this is used to make the sections in webpage.

inline:

used for text.

table:

used for two- dimension table data.

positioned:

it is used for explicit position of an element.

Main Axis

the main axis direction is defined by flex-direction, the default direction is left to right.

Flexbox Elements

to start using a flexbox model, we need to define a flex container.

        <div class="container">
               <div>1</div>
               <div>2</div>
               <div>3</div>
         </div> 

Flexbox Properties

display:-

the flex container become flexible by setting the display property to flex.

               .container{
                   display: flex;
                  }

flex-direction property

the flex direction defines the direction of the container.

column:-

                  .container{
                          display: flex;
                          flex-direction: column;
                           }

column-reverse:-

it orients the flex items in vertical direction, from bottom to top.

                   .container{
                          display: flex;
                           flex-direction: column-reverse;
                           }

row: -

the row value of flex-direction orients the flex items horizontally (from left to right)

              .container{
                          display: flex;
                          flex-direction: column;
                           }

row-reverse: -

the row-reverse stacks the flex item from right to left

                .container{
                          display: flex;
                          flex-direction: row-reverse;
                           }

flex-wrap property

flex-wrap property specify the flex item should wrap or not

wrap:-

                  .container {
                          display: flex;
                          flex-wrap: wrap;
                           }

nowrap:-

                    .container {
                          display: flex;
                          flex-wrap: nowrap;
                           }

wrap-reverse:-

                       .container {
                          display: flex;
                          flex-wrap: wrap-reverse;
                           }

flex-flow property

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

justify-content property

center:-

                       .container {
                          display: flex;
                          justify-content: center;
                           }

flex-start:-

                     .container {
                          display: flex;
                          justify-content: flex-start;
                           }

flex-end:-

                      .container {
                          display: flex;
                          justify-content: flex-end;
                           }

space-around:-

                         .container {
                          display: flex;
                          justify-content: space-around;
                           }

space-between:-

                     .container {
                          display: flex;
                          justify-content: space-between;
                           }

align-items property

center: -

                      .container {
                          display: flex;
                          align-items:  center;
                           }

flex-start:-

                   .container {
                          display: flex;
                          align-items:  flex-start;
                           }

flex-end:-

                       .container {
                          display: flex;
                          align items: flex-end;
                           }

stretch :-

                    .container {
                          display: flex;
                          align-items:  stretch;
                           }

baseline:-

                 .container {
                          display: flex;
                          align-items: baseline;
                           }

align-content property

center:-

  .container {
                          display: flex;
                          align-content:  center;

The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.

Constituent properties

This property is a shorthand for the following CSS properties:

1)flex-grow

2)flex-shrink

3)flex-basis

'flex-grow'

Defines the flex-grow of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 0)

'flex-shrink'

Defines the flex-shrink of the flex item. Negative values are considered invalid. Defaults to 1 when omitted. (initial is 1)

'flex-basis'

Defines the flex-basis of the flex item. A preferred size of 0 must have a unit to avoid being interpreted as a flexibility. Defaults to 0 when omitted. (initial is auto)

keep learning and keep exploring!