0 environment
- System: win10
- Editor: IDEA
- Browser: Google
1 introduction
For those of you who are not front-end professionals, you can look at your CSS document context-content in a confusing way that works but is uncomfortable to use
2 prepare
Rookie tutorial online source code
Three concepts
The precision-content property defines how browsers allocate space between and around elements along the main axis of an elastic container (or grid row axis)
The context-content attribute is a child of the Flexible Box Layout module. It defines alignment along the principal axis. It helps to allocate extra free space when all flex items on a row are either inflexible or flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow rows. The HTML5 and CSS web design basics book mentions white space, in other words, axis elements (elastic layout + alignment along axis/how white space is allocated between elements).
4 Achieve comparison
1 the flex – XXX and center
Take the whole div as a whole and place it on the main axis. For example, start middle end (left middle right)
2 space-xxx
Combining literal interpretation with the picture below, The blank space around each element (the outer edge of the outermost element * 2 == the blank space between the two elements) a blank space evenly split (the outer edge of the outermost element == the blank space between each element) You can think of it as around + between
