CSS 24 💻 flexbox layout introduction

a - flexbox introduction

    flexbox or A.K.A flexible box layout is a layout that allows you to layout elements in one dimension.
    the container's items can be laid out in vertical or horizontal dimension. column or row
    flexbox is useful when using responsive designs 
    the child items are resized and reordered based on the available space.
    display: flex; → set the container as a flexbox container
    flexbox container has main axis and cross axis. By default main axis is the horizontal axis
    the cross axis is the perpendicular axis to main axis, by default the vertical axis
    main-axis and cross-axis change when you change the flex-direction. Default is row


b -  flexbox important properties

    flex-direction→Defines the main axis of the flex container, which determines the direction of the items
    flex-wrap→Allows items to wrap if there is not enough space
    flex-grow→Defines the ability of an item to grow if there is available space within its container
    flex-shrink→Defines how much an item can shrink if there is not enough space in its container
    flex-basis→Defines the initial size of an item on the main axis before any space is distributed
    flex→Combines flex-grow, flex-shrink and flex-basis properties into a single shorthand property
    in the next videos we will explain the properties in detail