CSS Flexbox Basics
Introduction
CSS Flexbox is a CSS web layout model which allows responsive elements within a container to be automatically arranged depending on viewport size.
There are really two major parts of the flexbox we need to concern:
Flexbox Container
A flexbox or simply flex-container is the parent object and contains flex items.
We can define attributes on the Flexbox container to define direction and layout of the container.
Flex Items
Flex-items are primary objects within flex-containers.
The object can be a variety of HTML objects like images, text, form and more; but only the primary object, get affected not the nested children’s of the flex-items.
We can set properties on flex-container that directly affect flex-items.
We also adjust specific properties and attributes on flex-items that only affects the flex-items and not the flex-container.
The direction of the container are defined on the parent, will directly affect what can we do to the flex-items.
