flex布局（弹性盒子）

元素拥有能控制子元素排列的能力

注意：设置了弹性盒子，则该弹性盒子的直接子元素的float/clear/vertical-align属性都将失效。z-index可以直接使用

在CSS中，clear属性用于控制元素周围的浮动元素的布局行为。通过clear属性，可以有效地控制元素周围的浮动元素，避免产生意外的布局问题。该属性有四个可能的值：

1. clear: left - 元素的左侧不允许浮动元素。
2. clear: right - 元素的右侧不允许浮动元素。
3. clear: both - 元素两侧都不允许浮动元素。
4. clear: none - 元素两侧都允许浮动元素（默认值）。

在CSS中，vertical-align属性用于控制行内元素或表格单元格内部的垂直对齐方式。这些值可以灵活地控制行内元素和表格单元格内部内容的垂直对齐方式，以实现需求的布局效果。该属性可以应用于行内元素和表格单元格。

vertical-align属性有多个可能的值：

1. baseline：默认值，元素放置在父元素的基线上。
2. sub：使文本的下标对齐到父元素的基线。
3. super：使文本的上标对齐到父元素的基线。
4. top：使元素的顶部对齐到父元素的顶部。
5. middle：使元素垂直居中对齐到父元素的基线。
6. bottom：使元素的底部对齐到父元素的底部。
7. text-top：使元素的顶部对齐到父元素的字体顶部。
8. text-bottom：使元素的底部对齐到父元素的字体底部。
9. percentage：使用百分比值来对齐元素。

display:flex  独占整行

display：inline-flex  行内弹性盒子。内容有多宽，占据多宽（但是可以设置宽高）

flex:1 代表 flex-grow:1,  flex-shrink:1,  flex-basis:0%

        即当空间不够时，先挤压设置为flex:1的项目到内容宽度后，才缩小其他项目

flex-grow:1  ，即当空间不够时，缩小所有项目（因为flex-shrink默认为1）