白日依山尽,黄河入海流。欲穷千里目,更上一层楼。
``` ``` css // 以下为样式代码,非核心功能代码 * { box-sizing: border-box; } .container { background-color: #eee; height: 10rem; width: 40rem; margin: 1rem; } .item { border: 1px solid #888; } ```">
极客时间对于推广渠道会有返利优惠,比如山月在极客时间买了一门课,再把课程分享给好友购买,这时极客时间会向山月返利20元左右。
而我现在做了一个返利平台,你可以在上边通过山月的链接购买课程,此时极客时间会向我返利。为了共同学习,而你可以添加我的微信 (shanyue94),我将把极客时间给我的返利发一个红包全部返给你

# 如何实现三列均分布局

更多描述

布局代码如下所示,可见 三列均分布局 - codepen (opens new window)

注: 在第一个元素中设置文字,子元素不能因文字过长而挤压。

<div class="container">
  <div class="item">白日依山尽,黄河入海流。欲穷千里目,更上一层楼。</div>
  <div class="item"></div>
  <div class="item"></div>
</div>

// 以下为样式代码,非核心功能代码
* {
  box-sizing: border-box;
}

.container {
  background-color: #eee;
  height: 10rem;
  width: 40rem;
  margin: 1rem;
}

.item {
  border: 1px solid #888;
}

Issue

欢迎在 Issue 中交流与讨论: Issue 572 (opens new window)

见代码 三均分布局 - Codepen (opens new window)

# 使用 Flex

注意使用 calc(100% / 3) 设置 flex-basis,同时它的缺陷是不能够很好的为子元素设置左右间隙

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;
  
  
  .item {
   flex: 0 0 calc(100% / 3);
  }
}

注意: 如果同时给子元素使用 flex-grow: 1 控制均分,当子元素拥有文字等内容时,会受到挤压,将无法实现均分布局。

# 使用 Grid

使用 Grid 直接操作容器即可,对于子元素之间的间隙也可以很好地控制,可看出 Grid 更为简单,更为高效,更为精确

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

关于山月

我的项目:
我的微信:shanyue94,欢迎交流
Last Updated: 6/17/2021, 2:42:18 AM