关于css 的position

https://www.w3school.com.cn/cssref/pr_class_position.asp

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position(这个更好)
————————————————————————————————————————-

<br />    display: flex;<br />    flex-direction: row;          //横向排列<br />    justify-content: space-between;       //每个元素在横向排列的时候，往左 或者往右靠 。<br />    align-items:flex-end;                         //每个元素内部，纵向方向的位置

align-items:flex-end; 这个的效果就是 横向排列的项目， 单个元素靠底下对齐

flex-shrink属性
含义及用法：
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意：如果元素不是弹性盒对象的元素（Flex），则 flex-shrink 属性不起作用。

flex-shrink: number|initial|inherit;

flex-grow、flex-shrink、flex-basis这三个属性的作用是:在flex布局中，父元素在不同宽度下，子元素是如何分配父元素的空间的。

大家把目标锁定在加粗的部分，稍微懂一点代码的人都应该可以发现我最后一个div的class是这样的class=”bottom content”，注意这个bottom和content之间的空格。这样的样式应用是什么意思呢？
这就是我今天要分享的。这种就是样式的交叉应用，也可以称为样式叠加法。
当两个样式之和是你要的第三个样式的时候，你就没有必要在去书写第三个样式了，直接使用样式的交叉使用方法，这样可以省去你很多编写样式的时间。大家把目标锁定在加粗的部分，稍微懂一点代码的人都应该可以发现我最后一个div的class是这样的class=”bottom content”，注意这个bottom和content之间的空格。这样的样式应用是什么意思呢？
这就是我今天要分享的。这种就是样式的交叉应用，也可以称为样式叠加法。
当两个样式之和是你要的第三个样式的时候，你就没有必要在去书写第三个样式了，直接使用样式的交叉使用方法，这样可以省去你很多编写样式的时间。