seven's blog | 纯干货~常用布局汇总（持续更新）

纯干货~常用布局汇总（持续更新）

2018年06月20日
次

CSS
干货

文本溢出省略号

单行省略

.div{
    //...
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

多行省略

.div{
    //...
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}

flex布局相关

因为是纯干货，这里就不对flex 的属性做过多介绍，如果不了解的，可以直接百度，会有很多不错的教程

垂直居中

.fatherBox{
    display:flex;
    align-items:center;
    align-content:center;//若有多行则添加该属性，否则该属性无效
}

水平居中

利用水平居中可以实现日常开发中经常会遇到列表排列问题,比如一等比例放三个商品

.fatherBox{
    display:flex;
    justify-content:center;//居中，适用于只有一个子元素时
    //两端对齐，项目之间的间隔都相等
    //justify-content:space-between;
    //每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
    //justify-content:space-around;
}

垂直一侧定宽一侧自适应布局

//html
<div class="fatherBox">
  <div class="chindrenBox"></div>
  <div class="chindrenBox"></div>
</div>

//css
.fatherBox{
  display: -webkit-box;
  height: 400px;
  width: 300px;
  -webkit-box-orient:vertical;//默认为水平排列，所以需要设置为垂直排列
  background:gray;
  
}
.chindrenBox:first-child{
  height:40px;
  background:green;
}
.chindrenBox:last-child{
  display: -webkit-box;
  -webkit-box-flex: 1;
  background: pink;
}

tip:

上方绿色盒子高度固定
父级盒子高度固定

水平一侧定宽一侧自适应布局

//html
<div class="fatherBox">
  <div class="chindrenBox"></div>
  <div class="chindrenBox"></div>
</div>

//css
.fatherBox{
  display: -webkit-box;
/*   -webkit-box-orient:horizontal; *///默认就是水平排列，可以不加此属性
  background:gray;
  height:100px;
}
.chindrenBox:first-child{
  display: -webkit-box;
  width:80px;
  background: orange;
}
.chindrenBox:last-child{
  display: -webkit-box;
  -webkit-box-flex: 1;
  background: pink;
}

水平等比分配

//html
<div class="fatherBox">
  <div class="chindrenBox"></div>
  <div class="chindrenBox"></div>
</div>

//css
.fatherBox{
  display: -webkit-box;
/*   -webkit-box-orient:horizontal; *///默认就是水平排列，可以不加此属性
  background:gray;
  height:100px;
}
.chindrenBox{
  display: -webkit-box;
  -webkit-box-flex: 1;
  width:1px;
  background:green;
}
.chindrenBox:first-child{
  background: orange;
}
.chindrenBox:last-child{
  background: pink;
}

但若两者内容长度不同时，会出现bug，如下图：此时需要对两个都加上相同的任意宽度，如width:1px;

//css
.fatherBox{
  display: -webkit-box;
/*   -webkit-box-orient:horizontal; *///默认就是水平排列，可以不加此属性
  background:gray;
  height:100px;
}
.chindrenBox{
  display: -webkit-box;
  -webkit-box-flex: 1;
  width:1px;
  background:green;
}
.chindrenBox:first-child{
  background: orange;
}
.chindrenBox:last-child{
  background: pink;
}

20 Jun 2018

本博客所有博文作者均为张敏。所有文章除特别声明外，均采用 CC 3.0 License, 许可协议。转载请注明出处！博客源码可点击查看；博客部分设计理念参考了羡辙杂俎。

纯干货~常用布局汇总（持续更新） 2018年06月20日 次