CSS flex布局 内容溢出

黑蟾蜍 css小白学习中

flex布局中，容器（flex-container）内的项目（flex-item）内容过大，如 文字过长、图片过大等 ,会使容器（flex-container）变大，使布局错乱，不能达到设计效果，解决办法

flex-item：{
flex:1;
width:1;//父容器（flex-container）display-direction:row
}

flex-item：{
flex:1;
height:1;//父容器（flex-container）display-direction:column
}

这样容器（flex-container）就不会被动变大
如果想忽略溢出内容，可以添加

flex-item：{
overflow:hidden;
}

如果内容为单行文字溢出，想显示省略号…,可以这样

flex-item：{
overflow:hidden;
text-overflow: ellipsis;
}