Flex Container & Flex Items

💾 Flexbox consists of flex containers and flex items. Flex items (the objects inside a flex container) can be laid out horizontally or vertically, aligned and distributed in various ways. It is also possible to stretch or shrink objects to fill the available empty space.

layout module consists of the flex container (the parent element) and the flex items (the children elements). The flex items can be organized as a row or as a column, and the available free space can be distributed between them in various ways.

To get started with Flexbox you will need to add a Flex Container to the page. This works just like a layer or Layout Grid. Flex Container itself is a floating element so it will be inserted at the free row on the page.

<div class="container">
    <div class="item">
        <p>Item1</p>
    </div>
    <div class="item">
        <p>Item2</p>
    </div>
    <div class="item">
        <p>Item3</p>
    </div>
    <div class="item">
        <p>Item4</p>
    </div>
</div>

With flexbox you can:

• Automatically scale elements (alter height or width) so that they fill the available space

• Automatically shrink or grow elements to make them fit into the container and prevent overflow

• Change the order of the items

• Solve the problem of horizontal and vertical centering

• Create columns of the same height

• Create a footer sticking to the bottom of the page

• Design navigation panels

Flexbox elements can have many properties some of which are set on the flex container and the others are set on the flex items.

Properties that apply to the flex container:

• align-content

• align-items

• display

• flex-direction

• flex-flow

• flex-wrap

• justify-content

Properties that apply to the flex items:

• align-self

• flex

• flex-basis

• flex-grow

• flex-shrink

• order

How to Create the Flex Container

The display: flex; property applies to the container, makes the container a block element, and enables the flex layout for all its direct children.

            
.container {
  display: flex; 
}
    

The display: inline-flex; works in the same way. Only it creates a container as an inline element.

.container {
  display: inline-flex; 
}

Flex Container & Flex Items

In order to get Flexbox to work, you need to set up the Parent-Child relationship. The parent is the flex container, and everything within it is the children or flex items.

Container properties

Some flexbox properties apply to the container, which sets the general rules for its items. They are

• flex-direction

• justify-content

• align-items

• flex-wrap

• flex-flow