Basic concepts of flexbox:
The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model for distributing space between items and includes numerous alignment capabilities. This article gives an outline of the main features of flexbox, which we will explore in more detail in the rest of these guides.
When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. This can be contrasted with the two-dimensional model of CSS Grid Layout, which controls columns and rows together.
Justify content :
The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally). Tip: Use the align-items property to align the items vertically.
justify-content is a CSS property that is used to align and distribute the flex items (or content) along the main axis of a flex container. It controls the horizontal alignment of items within a flex container.
Their are 6 properties:
1.justify-content: flex-start:
Default value. Items are positioned at the beginning of the container.
flex-start (default): items are packed toward the start line.
2.justify-content: flex-end
flex-end : items are packed toward to end line.
Items are positioned at the end of the container.
3.justify-content: center
Items are positioned in the center of the container.
The items are packed flush to each other toward the center of the alignment container along the main axis.
4.justify-content: space-between
Items will have space between them.
justify-content: space-between , all available space is placed between the first and last items, pushing both items to opposite edges of the container.
5.justify-content: space-around
Items will have space before, between, and after them.
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multiple containers. The interactive example below demonstrates some justify-content values using grid layout.
6.justify-content: space-evenly
Items will have equal space around them.
Use justify-evenly to justify items along the container's main axis such that there is an equal amount of space around each item.
Questions:
1.what is flex box?
2.What does justify-content do in flexbox?
3.What is a flexbox used for?
4.Why is it called flexbox?
5.What is justify-content?
