Get out of nightmare that positioning elements with CSS.
What is Flexbox Layout
The box, we call it flex container. All children are flex items.
X-axis of the container called main axis, Y-axis is named cross axis.
Start of main axis is main start, end of the main axis is main end.
Attributes for container:
- The direction of rows is controlled by flex-direction
- Keep the row won’t break, using
flex-flowis a shorthand of flex-direction and flex-wrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-contentdefines the alignment along the main axis
align-itemsis for cross-axis alignment
- Similar to how
justify-contentaligns individual items within the main-axis,
align-contentaligns space in the cross-axis
Attributes for items
orderwith a smaller number would be in the front. By default is 0, however, -1 is ahead of 0
flex-growenables the item to grow
flex-shrinkenables the item to shink
flex-basisdefines the default size of an element before the remaining space is distributed
flexis the shorthand for
flex-basiscombined. Default is
0 1 auto
align-selfallows the default alignment to be overridden for individual flex items
Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
As per https://css-tricks.com/snippets/css/a-guide-to-flexbox/