css 每天一练之弹性布局

flex弹性布局

Webkit 内核的浏览器，必须加上-webkit前缀。
flex:0 0 50px;
flex属性是flex-grow, flex-shrink 和flex-basis的简写，默认值为0 1 auto

ps:

ios8以下版本没办法做到垂直居中显示
ios8以下版本必须有/* Safari */注释的样式

<div class="flex-wrap">
    <div class="tit">标题</div>
    <div class="txt">2很长很长很长很长很长很长很长很长很长很长很长很长2</div>
    <div class="tit">标题</div>
</div>

.flex-wrap{
    width: 100%;
    display: -webkit-flex;  /* Safari */
    display: flex;
    border: 1px solid #ccc;
    height: 80px;
    align-items: center;
}
.flex-wrap .tit{
    flex: 0 0 50px;
    width: 50px;  /* Safari */
}
.flex-wrap .txt{
    flex: 1;
    width: 100%; /* Safari */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

table布局

table布局可以设置
ps: 必须设置table-layout: fixed; /* 列宽由表格宽度和列宽度设定。*/ 宽度超过显示省略号才可以生效

<div class="table-wrap">
    <div class="table-td">标题</div>
    <div class="table-dd">
        <div>2很长很长很长很长很长很长很长很长很长很长很长很长2</div>
    </div>
    <div class="table-td">标题</div>
</div>

.table-wrap{
    width: 100%;
    margin-top: 20px;
    display: table;
    table-layout: fixed;
    height: 80px;
    border: 1px solid #ccc;
}
.table-wrap div{
    vertical-align: middle;
}
.table-wrap .table-td{
    width: 50px;
    display: table-cell;
}
.table-wrap .table-dd{
    display: table-cell;
}
.table-wrap .table-dd div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

在线调试