IMWeb 社区 未经同意,禁止转载
当决定写这篇博文时候,突然一道闪电从脑海劈过,于是临时决定将这个熟悉然后到懵逼最后到放弃的问题分为两部分。
闲话少说,直接上题:
要求如下:
· 方法不唯一,欢迎大家把自己解决方案分享到评论区
1、插入四个空标签,设置 flex:1,这个可能是大家最先想到的。
- <ul class="share-list">
- <li class="gap"></li>
- <li class="share-item"></li>
- <li class="gap"></li>
- <li class="share-item"></li>
- <li class="gap"></li>
- <li class="share-item"></li>
- <li class="gap"></li>
- </ul>
- .share-list{
- display: flex;
- }
- .share-item{
- width: 60px;
- height: 60px;
- }
- .gap{
- flex: 1;
- width: 1%;
- }
2、第一个和第三个设置 flex 为 1,第二个为 icon 的固定宽度;内嵌一层处理具体的 icon 宽度
- <ul class="share-list">
- <li class="share-item"><div class="item-inner"></div></li>
- <li class="share-item"><div class="item-inner"></div></li>
- <li class="share-item"><div class="item-inner"></div></li>
- </ul>
- .share-list{
- display: flex;
- }
- .share-item:nth-child(1),
- .share-item:nth-child(3){
- flex: 1;
- width: 1%;
- }
- .share-item:nth-child(2){
- width: 60px;
- }
- .item-inner{
- width: 60px;
- marigin-left: auto;
- margin-right: auto;
- }
3、对
进行变通
- justify-content: space-between;
- 每个间隙的宽度 = (100% - 60px * 3)/ 4 = 25% - 45px
先外套一层 wrap,设置左右的 padding 各位 25%,再对 list 设置负的左右 margin 各位 45px(相当于左右的 padding 减少了 45px),得到第一个和最后一个间隙;中间的间隙通过
自由分配
- justify-content: space-between;
- <div class="share-list-wrap">
- <ul class="share-list">
- <li class="share-item"></li>
- <li class="share-item"></li>
- <li class="share-item"></li>
- </ul>
- </div>
- share-list-wrap{
- padding-left: 25%;
- padding-right: 25px;
- }
- .share-list{
- display: flex;
- margin-left: -45px;
- margin-right: -45px;
- justify-content: space-between;
- }
4、高级
法
- justify-content: space-between;
直接使用 list 的 before 和 after 伪元素参与布局
- <ul class="share-list">
- <li class="share-item"></li>
- <li class="share-item"></li>
- <li class="share-item"></li>
- </ul>
- .share-list{
- display: flex;
- justify-content: space-between;
- }
- .share-list:before,
- .share-list:after{
- content: "";
- }
- .share-item{
- width: 60px;
- height: 60px;
- }
计算各个位置,第一个位置为 25% - 60px
50%,第三个位置为 75% - 60px*25%
这里就不再多讲,根据上面的间隙宽度计算公式总会算出来的,可能一开始想错了,调整下就对了。
最终的计算公式为:(假设 n 为间隙数,w 为图标的宽度)
第 i 图标的位置为: i/n (%) - w(n-i)/n (px),结合 left 和 transform 表示就是
- left: i / n * 100 % ;
- transform: translate( - (n - 1) / n * 100 % , 0);
设置第二个为绝对定位在中间;第一个的宽度为 50%,padding-right 为 30px,第二个的宽度为 50%,padding-left 为 30px,然后里面居中
- .share-item:nth-child(2){
- position: absolute;
- left: 50%;
- transform: translate(-50%, 0);
- width: 60px;
- }
- .share-item:nth-child(1),
- .share-item:nth-child(3){
- float: left:
- width: 100%;
- text-align: center;
- box-sizing: border-box;
- }
- .share-item:nth-child(1){
- padding-right: 30px;
- }
- .share-item:nth-child(3){
- padding-left: 30px;
- }
- .item-inner{
- display: inline-block;
- vertical-align: middle;
- }
设置 table-layout:fixed,第二个 td 为 60px,那么第一个和第三个自动等分剩余的空间,然后再单元格居中即可
这个问题,其实所有的人都能解答(请忽略有点哗众取宠的文章标题),只是答题运用的方法不同而已,有灵活的,有死板的,最关键的还是我们对遇到问题怎么对应上自己的知识库。
关键问题不是你实现不了,而是你选择的方案可能不是最优的,这就是 css,你了解越多,你就会越接近那个最优的捷径。
关于这个题目,你的 CSS 功力是否经得住考验呢?
所以前端的路上,需要不断学习系统先进的前端知识,了解业界的顶尖标准,不断自我进步...... 不论是巩固基础还是进阶充电,都需要保持进步的驱动力!
说了这么多...... 那还不快加入腾讯官方出品的 NEXT 学位课程!
NEXT 学位的优势?腾讯课堂官方出品、技术总监设计、高级工程师教学、硅谷最新的教学工具、前端岗位的项目实战、专家 1V1、直播课答疑、腾讯内推、专属就业通道... 种种优势助你走向前端的人生巅峰!
第四期招生马上截止,限定席位等你来抢
更多课程详情可扫描下方二维码咨询助教
来源: https://juejin.im/post/5a3b67096fb9a044fd11efd2