flex布局、文字溢出、图片水平垂直居中_justify-content 字数多挤压-CSDN博客

本文深入讲解CSS中的Flex布局，包括display:flex属性的使用，不同方向的布局方式如row和column，以及如何通过flex-wrap实现换行。此外，还介绍了justify-content的多种对齐方式和文本溢出时的优雅处理方案，最后展示了如何利用Flex布局实现图片的水平垂直居中。

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