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-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; /*垂直对齐方式*/ }