- 等分排列
display: flex;
justify-content: space-between;
space-around 左右 不同item之间都有等分空白
space-between 左右贴紧 仅不同Item之间有等分空白
- 自动换行
display: flex; flex-flow: wrap; /*规定自动换行的处理方法 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。*/ word-break: break-all; /*break-word许长单词或 URL 地址换行到下一行*/ word-wrap:break-word;
- 渐变
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
- 分块设置背景
background-image: linear-gradient(to bottom, #72DAF8 390rpx, #f2f2f2FF 0);
- 动态计算高度 calc( 100vh - 64px); 要有空格!!!!