1. Set the problem
As we know, an interface (which is, in particular, a web interface) is made up of interface blocks themselves, and these interface blocks themselves are a pool for the smaller interface blocks attached to it. .
So on and so forth, the overall interface becomes multi-layered.
Normally, the default interface blocks will be placed in the top left corner (inside the parent block) and joined in accordance with the left-> right, top-> bottom rule.
This will never satisfy the designs and features that an interface needs. Suppose I need a decent size block, and inside there are a few small interface blocks; These people did not fill the whole land that the father divided. So you guys will headline to each other on the left, leaving a hollow area that does not fit the design aesthetic.
The layout of the blocks will not be smooth if using float, padding, margin, top or left … And it is also very confusing.
There is a very effective way to do this, the most basic is to use display: flex; Combine several properties with flexible options.
2. Use
Turn on your browser and see how simple things are before flex:
HTML:
1 2 3 4 5 6 | <div id="parent"> <div id="son-first">1</div> <div id="son-second">2</div> <div id="son-third">3</div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; } #parent div { margin: 5px; text-align: center; } #son-first { width: 100px; height: 100px; background: #8e0088; } #son-second { width: 70px; height: 70px; background: #d420cc; } #son-third { width: 40px; height: 40px; background: #f5a3f1; } |
And this is what we get:
Now try flex:
1 2 3 4 5 6 7 8 9 10 11 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; } |
So :
Attached to this type of flex display are the properties:
- flex-direction: allows to change 2-dimensional coordinates in blocks.
- justify-content: justify the distance between the child blocks, between the children and the parent block itself.
- align-items: aligns the position of the sub-blocks to the line created by the flex-direction axis.
2.1 Some examples of justify-content
2.1.1. Tending to the end
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; justify-content: flex-end; } |
2.1.2. Create space on both sides (along the axis) and evenly spaced the blocks
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; justify-content: space-around; } |
2.1.3. Justify the distance of the blocks
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; justify-content: space-between; } |
2.1.4. Centered
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; justify-content: center; } |
2.2 Some examples of flex-direction
2.2.1 Vertical render axis
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; flex-direction: column; } |
2.2.2 Vertical axis, vertically from the bottom up
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; flex-direction: column-reverse; } |
2.2.3 Horizontal render axis, from right to left
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; flex-direction: row-reverse; } |
2.3 Some examples of align-items
2.3.1 Center the square on the right axis
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; align-items: center; } |
2.3.2 Tuck to the bottom perpendicular to the render axis
1 2 3 4 5 6 7 8 9 10 11 12 | #parent { width: 500px; padding: 5px; color: white; font-size: 20px; font-family: serif; background: #6e9090; display: flex; align-items: flex-end; } |
2.4 Use the mixture
The above properties are compatible with each other so we can use a combination of their options to create the desired interface.
Create fancy interfaces for beverage business web, for example, that can make hanging basket effect with align-items: flex-start; to describe the drink glass …
3. Conclusion
Very simple like that, hope is useful for backend brothers, but not strange frontend!