CSS 常用布局

一、Flex 布局的自适应子项内容过长导致其被撑大问题

效果图：

参考：https://blog.csdn.net/u012557814/article/details/114102731
实现：
问题还原：
flex 布局中，把其中一个子项设置 flex-grow: 1，可以使它自动占据所有剩余空间，但是当该子项内容过长时，子项长度会被长内容给撑开而出现滚动条。

<div class="box">
	<div class="item-1">xxxx</div>
	<div class="item-2">
    <div class="item-3">
          long content - long content - long content 
          - long content - long content
          long content - long content - long content 
          - long content - long content
          long content - long content - long content 
          - long content - long content
      </div>
  </div>
</div>

.box {
	display: flex;
}
.item-2 {
	flex: 1;
}
.item-3 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

解决
给自适应的子项加一个 width: 0 可以完美解决该问题。

.box {
	display: flex;
}
.item-2 {
	flex: 1;
  width: 0;
}
.item-3 {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

二、css实现填充剩余高度

参考： https://blog.csdn.net/u012557814/article/details/120709653
自动填充高度.html

<div class="box">
  <div class="header">头部</div>
  <div class="auto-fill">自动填充</div>
</div>

使用 flex（推荐）

• 兼容性好；
• 只需关注自动填充的 div，无需考虑其他 div 的高度

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  flex: 1
}

使用绝对定位（一般）

• 无兼容问题；
• 但需要知道其他 div 已占据的高度

.box {
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  position: absolute;
  top: 30px;
  bottom: 0px;
}

使用 calc 函数（一般）

• 无兼容问题；
• 但需要知道其他 div 已占据的高度；

.box {
  height: 100%;
}

.header {
  background: dodgerblue;
  height: 30px;
}

.auto-fill {
  background: wheat;
  height: calc(100% - 30px);
}

三、不固定宽高的元素水平垂直居中

参考：https://blog.csdn.net/w390058785/article/details/77992457

四、两边固定，中间自适应

参考：https://blog.csdn.net/qq_43368682/article/details/108507746

五、CSS图片背景

<div class="empty-search">
	<div class="img-box"></div>
	<!-- <img :src="searchNodataImg" alt="" /> -->
	<div class="text">未搜索到相关内容</div>
</div>

.empty-search {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  img {
    width: 180px;
    height: 135px;
  }
  .img-box {
    width: 180px;
    height: 135px;
    background-image: url("~@/assets/images/common/empty_dark.png");
    background-size: cover;
    /* background-image: url("~@/assets/images/common/empty_dark.png"); */ 
    /* background-repeat: no-repeat; */ 
    /* background-size: 100% 100%; */ 
  }
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #c0c2c4;
    line-height: 18px;
  }
}