如何让内容图标span元素根据容器尺寸拉伸至50%宽度与100%高度

嘿，这个需求用Flexbox就能轻松搞定，刚好适配你动态宽高的容器！先说说你现有代码里的小问题：inline-block元素之间默认会有空白间隙，而且align-items: stretch是Flex容器的属性，放在子元素上根本不会生效，所以才达不到你要的平分宽度+占满高度的效果。

直接给容器开启Flex布局，子元素就能自动平分空间并占满容器高度，代码简洁还适配动态尺寸：

/* 先把容器改成Flex容器 */
.container {
  display: flex;
  width: 100%;
  height: 100%; /* 确保容器占满父元素的宽高，适配动态尺寸 */
}

.fonticon1, .fonticon2 {
  flex: 1; /* 核心属性：让两个元素平分容器的可用宽度 */
  /* 可选：如果需要让内部图标居中，加上下面的属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.icon1:before, .fonticon2:before {
  content: '\e34c';
  line-height: 1;
}

HTML结构保持你原来的就行：

<span class="container">
  <span class="fonticon1">
    <span class="icon1"></span>
  </span>
  <span class="fonticon2"></span>
</span>

关键逻辑说明： #

• display: flex 给容器开启Flex布局后，子元素默认会沿水平方向排列，并且自动占满容器的高度（因为Flex容器默认的align-items值是stretch）。
• flex: 1 让两个子元素平分容器的可用宽度，不管容器是多大，两个元素都会各占50%，完全适配动态宽度。
• 如果需要让图标在子元素内部居中，给.fonticon1和.fonticon2加上display: flex和居中属性，就能让图标完美居中显示。

如果你需要兼容极老浏览器（比如IE9及以下），也可以用浮动方案，但需要处理清除浮动，而且高度占满的逻辑会麻烦一些：

.container {
  width: 100%;
  height: 100%;
  overflow: hidden; /* 清除浮动带来的容器高度塌陷问题 */
}

.fonticon1, .fonticon2 {
  float: left;
  width: 50%;
  height: 100%;
  font-size: 16px;
}

不过还是更推荐Flexbox方案，代码更简洁，适配性更强，现在主流浏览器都支持。

内容的提问来源于stack exchange，提问作者karthik