Display Flex Box css properties and codes
To use the flexbox structure, display: flex; or display: inline-flex; must have feature. In a box with a flex property, items are sized appropriately and sorted within the flex container.
Display Flex Box
.container{
display: flex;
}
or
.container{
display: inline-flex;
}
In a flex box with the display:flex property, items grow or shrink in size to fit the box along the main axis.
The flex-direction property is used to determine the ordering direction of the items in a flex box. The flex-direction property determines the ordering direction of the elements inside the flexbox flex box structure.
While some alignment features like align-items align to cross-axis, some alignment features like justify-content align to main-axis.
Difference Between Flex and inline-flex
display: flex; and display: inline-flex; There is only one difference between them and that is that the inline-flex feature puts the flexible container inline, that is, inline level. In a container with inline-flex property, all flex properties will work the same as in the flex container.
This situation is the same as display: block; and display: inline-block; You can think of it as an example. One is Block-Level and the other is Inline-Block-level.
Can Flex Have Flex items inside a Container?
In short yes. display:flex; You can create nested items in inline-flex and flex property in a container. After you start using the flexbox structure, you can easily perform such operations.
.container{
display:flex;
}
.container div{
display:inline-flex;
}
.container div div{
display:flex;
}
Chapter Note: You should think of the Flexbox flex box model as a CSS module that contains many alignment features. Just display: flex; It is not a feature to be described as. display: flex; If you do not use the property, other flexbox CSS below will not work. With this aspect, it will be advantageous when writing CSS code for different devices. You will not need to change other flexbox properties when you specify @media screen and (max-width: 768px) {.container{display: block;}} for the display area size you want using a responsive media query.