To fully utilise all of the available space, Flexbox📰 will provide containers with the flexibility to extend and shrink individual elements. A box having flexibility can be described as a flexbox in general. A new🆕 CSS3 module makes it simple to align items in various directions and sequences.
The float layout is replaced🔁 with a CSS flexbox📦 layout. A new🆕 method of creating 1️⃣one-dimensional layout.
What is Flexbox📦 Axis?🤔
When dealing with flexbox, we must consider the cross axis and the main axis as two separate axes. The cross axis is perpendicular to the main axis, which is determined by the flex-direction attribute. These axes are the foundation of everything we do with flexbox, therefore it is important to grasp them right away.
The flex attributes operate in either a column-based or a row-based approach, depending on how they are defined.
Flexbox 📰📦Properties
There are two sorts of Flexbox properties:
1. Flexbox Container properties
2. Flexbox element properties
As a general guideline, use Flexbox container properties if you want an automated layout that includes arranging items in a vertical or horizontal list. Use element properties to arrange overlapping parts in a freeform arrangement.
1. Flexbox Container 📦Properties
i. Display and flex-direction
display: It provides information about the type of box that will be used for an HTML element.
syntax:
display: flex;
flex-direction: identifies the direction in which the flexible components inside a flexible container should approach.
syntax:
flex-direction: row | row-reverse | column | column-reverse;
In this example,
All elements inside the container become flexible when we define the container display type as flex. By default, the flex-direction property is set to a row, but we may also alter it to row-reverse, column, or column-reverse.
ii. flex-wrap and flex-flow
flex-wrap: If there is not enough space for the flex elements on one flex line, they should wrap into a new line.
syntax:
flex-wrap: no-wrap | wrap | wrap-reverse;
flex-flow: a shortcut for the flex-direction and flex-wrap properties.
syntax:
flex-flow: <flex-direction> <flex-wrap>;
In this example,
No-wrap is the default option for flex-wrap, whereas row and no-wrap are the default values for flex-flow.
We saw examples of how to utilise the flex-wrap attributes to wrap an element inside a container as well as how to use the flex-flow shortcuts for flex-direction and flex-wrap.
iii. justify-content
When the objects don't occupy the entire area on the main axis, they are horizontally aligned.
syntax:
justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;
In this example,
Although the default value of justify-content is flex-sart, we may adjust it to meet our requirements as we have seen its usage.
All elements are placed at the end of containers using the flex-end attribute. In the centre property, there are things within the container, filling the centre. Items are separated from one another by space in between. In space-around before, after, and between each item, there will be space. In space-evenly, each item will have an equal amount of space around it.
iv. align-items
When the flex items don't fill up the entire cross-axis, they are vertically aligned.
syntax:
align-items: flex-start | flex-end | center | baseline | stretch;
In this example,
As we can see in the example, by default, all objects that are aligned are stretched out. We changed this to meet our needs in order to view the modifications.
All the items in the container should be vertically aligned using the flex-start. Items can be flex-ended aligned vertically to the container's end. The container's middle is filled with items. Items should be baseline aligned with respect to the font size's base.
v. align-content
alters the flex-wrap property's behaviour. In contrast to align-items, it aligns flex lines rather than flex items.
syntax:
align-content: flex-start | flex-end | center | stretch | space-around | space-between | space-evenly;
In this example,
Although the default value of align-content is stretched, we may adjust it to meet our requirements as we have seen its usage.
This is the result of combining align-items with justify-content. Justifying content is only effective with flex-wrapped content items.
2. Flexbox Element 📦Properties
i. Align-self
Adjusts the alignment of a flex item and so overrides the align-items attribute of the flex container. It basically operates on the individual item to which alignment is to be applied.
syntax:
align-self: auto | flex-start | flex-end | center | stretch | baseline;
In this example,
flex-start aligns the item to the start, flex-end aligns the items to the end of the container, centre aligns to the centre, align-self: stretches the element, baseline works depending on font base, while auto depends on how the parent is aligned.
ii. order
Sets the order in which the flex items are to be placed inside a given container. The order is displayed in the container in ascending order.
syntax:
order: numeric-value;
In this example,
By default, every item has an order of 0, therefore when we assign item 2 to order 3 and item 1 to order 4, the system will check the order of every item and organise itself.
iii. flex-grow and flex-shrink
flex-grow: specifies the rate of growth of a flex item in relation to the other flex items contained in the same container.
flex-shrink: provides information on how much a flexible item will shrink in relation to the other flexible item in the same container.
syntax:
flex-grow: numeric-value;
flex-shrink: numeric-value;
In this example,
When the size of the screen rises, item 3 in container 1 will grow by a factor of two, giving it twice the width of other items. inversely it works in the case of shrink items.
iv. flex-basis
flex-basis: defines the flex item's starting length. When the flex-direction is set to row, it controls the width, while setting it to column controls the height.
syntax:
flex-basis: numeric-value;
In this example,
flex-basis Set the item1 width to a maximum of 200 px so that when the screen size rises, the size stays at 200 px and lowers as the screen size decreases.
This marks the conclusion of our discussion on the subject of flexbox. We covered all you need to know to begin working with flexbox in web development🌐.
Hope you all will like it.😊
Happy learning😊