Essays of this week (sorted out on weekends)

display：inline-flex; align-items：center Can be horizontally centered .
Attribute pairs for block elements flex The container doesn't work
Flex Containers are not block level containers , Therefore, some attributes dedicated to block layout , Yes Flex Layout doesn't work . such as ：

1. column-* In the multi column layout column-* attribute

2. float and clear You can't let the project under the elastic container get rid of the document flow , Or clear float .

3. vertical-align Vertical centering does not work .（flex Under the layout , Vertical centering is simpler and more comfortable ： Look at an article here ）

4. Pseudo class elements ::first-line and ::first-letter
   flex,inline-flex,inline-block difference

flex： Display the object as a block level elastic expansion box .

inline-flex： Display the object as an inline elastic expansion box .

inline-block: Render the object as inline object , But the content of the object is block Object rendering .

for instance ,inline Elemental margin and padding attribute , In the horizontal direction padding-left, padding-right, margin-left, margin-right All have margin effects ; But vertically padding-top, padding-bottom, margin-top, margin-bottom No margin effect .

that , about inline-block Come on ,margin and padding Vertical margin of , Will produce a margin effect .