数据传:
样式:
display
上下:
display:flex;
flex-direction{row|row-reverse|column|column-reverse}
row(默认)沿水平主轴由左向左排列,row-reverse由右向左,column由上向下。
左右:
display:flex;
flex-wrap{nowrap|wrap|wrap-reverse}
nowrap(默认)不换行,wrap换行(第一行在上方)
水平对齐:
justify-content{flex-start|flex-end|center|space-between|space-around}
item在水平方向的对齐方式。
垂直对齐:
align-items{flex-start|flex-end|center|baseline|stretch}
用于指定垂直方向的对齐方式。
平均分配:
display: flex;
justify-content: space-between;
多行对齐:
algin-content{flex-start|flex-end|center|space-between|space-around|stretch}
该属性只作用于多行的情况下,用于多行的对齐方式。
CSS中display属性的Flex布局_display上下布局_崔世勋的博客-CSDN博客
position
字在图上,同时子级页面固定底部
父级:
position属性为relative(相对定位)。
子级:
position属性为absolute(绝对定位),并设置它距离div的顶部为0px。
css - css页面底部固定的几种方法_css固定在底部_C_心欲无痕的博客-CSDN博客
https://blog.csdn.net/CHS007chs/article/details/81865355
float
左右浮动:
float:left;
float:right;