First, the theory:
1.flex-flow
A.flex-direction setting the telescopic flow direction of the telescopic container
B.flex-wrap setting a scaling item in a telescopic container if there is not enough space in the telescopic container, whether the scaling item is wrapped in a telescopic container
2.flex-pack
A. With the same parameters as the Box-pack property
B.distribute scaling items are evenly distributed across the same line
The starting edge of the first telescopic project in the C.start telescopic container is positioned at the beginning of the spindle of the telescopic container; The starting edge of the next scaling project is close to the end edge of the first telescopic project, and other scaling items are sequentially arranged along the spindle. All extra space along the layout axis of the telescopic container is placed at the end of the layout axis
D.end effect is the opposite of start
E.center all telescopic items are placed side by side
F.justify all scaling items are evenly allocated in the row, and any additional space along the direction of the telescopic container layout axis is evenly distributed across the scaling items
3.flex-align
A. All properties that have box-align
The B.stretch telescopic project stretches the entire telescopic container.
Second, Practice:
1.
<! DOCTYPE html>2.<! DOCTYPE html>3.<! DOCTYPE html>Third, Other:1. None of the above three have achieved results. I wonder which friend knows the reason to come and teach me. Thank you very much:)
CSS Learning (21)-flexbox Model II
