純乾貨~常用佈局彙總（持續更新）

文本溢出省略號

單行省略

.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:
- [x] 上方綠色盒子高度固定
- [x] 父級盒子高度固定

水平一側定寬一側自適應佈局

//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:first-child{
  display: -webkit-box;
  -webkit-box-flex: 1;
  background: orange;
}
.chindrenBox:last-child{
  display: -webkit-box;
  -webkit-box-flex: 1;
  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;
}