1. Display – Flex

Align-self is a property applied to individual flex items within the container.
It allows you to override the alignment set by align-items (which is applied to the container) for a specific item. This means you can control the alignment of a particular item differently from the rest.
align-self gives you fine-grained control over the vertical alignment of specific items within the container.
Common values for align-self include:

stretch: The item stretches to fill the cross-axis.

flex-start: The item aligns itself at the start of the cross-axis.
flex-end: The item aligns itself at the end of the cross-axis.
center: The item is centered along the cross-axis.
baseline: The item aligns itself with the baselines of other items.
Flex basis properties: Creating space for an element in a container before the element is not there yet.
In Flexbox, flex-basis is a property that defines the initial size of a flex item along the main axis before any remaining space is distributed. To put it simply, it sets the default width (or height, depending on the main axis) of a flex item.
Flex-grow is applied to individual flex items within a flex container. It defines how much an item can grow relative to the other items when there is extra space available along the main axis (the primary direction of the flex container). Here are some key points to understand:
Flex-shrink is used on individual flex items within a flex container to specify their ability to reduce in size if necessary. Here's a simple explanation:

Responsive design: Media queries

CSS Bootstrap
It is world’s most popular framework