css 每天一练之弹性布局

flex弹性布局

Webkit 内核的浏览器,必须加上-webkit前缀。
flex:0 0 50px;
flex属性是flex-grow, flex-shrinkflex-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;
}

在线调试

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 1,341评论 0 5
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 1,623评论 0 24
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,015评论 1 84
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 2,590评论 0 7
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 1,444评论 0 60