What is Css Flexbox ?

The Flexbox model is one dimensional layout model that provides a methods to offer a space distribution and powerfull alignment capabilities. Css Grid is another option for alignment, positioning etc.

Flex Container and Flext items

The flex container is the element that hold flex items. A container created with-

display: flex;

Flex items are direct children of flex containers.

 <div class="flex-container">
        <div class="items">item1</div>
        <div class="items">item2</div>
        <div class="items">item3</div>
    </div>

Properties of flex container.

Following properties very important in order to understand and work with flex box.

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

Properties of flex items.

• order

• flex-grow

• flex-shrinks

• justify-basis

• align-self

Start your Flexbox Journey