CSS样式
Flex布局
display: flex;
方向
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direcion: column-reverse;
排列方式
flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;
对齐方式
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
多行文字溢出…代替
.box{
width:100px;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
overflow : hidden;
}
单行文字溢出…代替
.text{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
图片水平垂直居中
.nav{
width: 100px;
height: 100px;
text-align: center;
}
.nav img{
width: 50px;
height: 50px;
vertical-align:middle;
}