CSS显示省略

一行省略显示

 white-space: nowrap;           //white-space 属性设置如何处理元素内的空白。
 text-overflow: ellipsis;       //text-overflow 属性规定当文本溢出包含元素时发生的事情。
 overflow: hidden;              //属性规定当内容溢出元素框时发生的事情。

多行省略显示

display: -webkit-box;           //属性规定元素应该生成的框的类型
 -webkit-line-clamp: 2;          
 -webkit-box-orient: vertical;   
 text-overflow: ellipsis;        
 overflow: hidden;

Flex布局解析

flex英文缩写Flexible Box,意为弹性布局,是CSS3的一种布局方式,且设置flex布局后,子元素的float、clear、vartical-align属性无效。

flex父容器属性

flex-direction //横向排版方向
flex-wrap //决定超出主方向布局是否换行,换行方式
flex-flow //是flex-direction属性和flex-wrap属性的缩写,默认为row nowrap
justify-content //主轴(横轴)方向上的对齐方式
align-items //侧轴(纵轴)方向上的对齐方式
align-content //

flex子级容器属性

order //子元素的排列顺序,默认为0,小前后大
flex-grow //子元素放大比例,默认为0
flex-shrink //子元素缩小比例,默认为1
flex-basis //子元素分配多余空间,默认为auto
flex //2、3、4属性的简写,默认为0 1 auto
align-self //

总结

实现flex瀑布流布局(两列布局)
<div id="app">
    <div class="itemContainer">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="itemContainer">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
#app{
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    width: 100%;
    .itemContainer{
        flex-direction: column;
        width: 50%;
        .item{
            background: #f4f4f4;
            margin-bottom: 10px;
        }
    }
}