Introduce
Hello everyone, I have read a shared article about FlexBox Cheat Sheets that is very complete and easy to understand, I share again in this article.
FlexBox architecture
FlexBox can specify the items in display in the Main Axis or the Cross Axis perpendicular to the main axis.
Properties of FlexBox
flex-direction
This property casts items horizontally
or vertically
justify-content
This property sorts the items according to the main axis
align-content
This property is used to align items inside the container along the cross axis , horizontally or vertically depending on the flex-direction.
align-items
This property is used to adjust the starting position and align items inside the container along the cross axis , horizontally or vertically depending on the flex-direction.
align-self
This property has the same effect as align-items of the container, but for each item separately, you can use it to reposition some of the items that align-items specified.
flex – grow | shrink | wrap
flex-grow: allows elements to expand according to the width of the container.
flex-shrink: in contrast to the flex-grow attribute above, it does not expand but shrinks as we change the width of the container.
flex-wrap: adjust the line down in the container.
Abbreviation
flex: Combine flex-grow, flex-shrink and flex-basis.
flex-flow: Combine flex-direction and flex-wrap.
Conclude
Hope this article will help you understand and apply FlexBox smoothly, thanks.