在日常开发中,设计师总是提出各种异想天开的需求,这给我们的UI修复工作带来了很多挑战。 看起来有时候会花费我们很多时间去实现,但一方面,这也是一个让我们对浏览器布局形式有更深入了解的机会。 本文主要记录之前工作中遇到的特殊布局,都是通过CSS的方法来实现的。
多条件空白布局
图中有两个内容块A和B。 它们的长度取决于内容的长度。 左右边距受 max-width: 200px 限制,中边距受 min-width: 150px 限制。 如果减少parent的长度,中间的空间仍会保持150px的长度,左右的空间长度会跟随parent的长度而缩小。 如右图所示:
从需求描述来看,需要的是一个既支持弹性(长度随父级长度变化)又支持约束(最大宽度、最小宽度)的属性。 说到灵活性,很自然的就会想到Flex布局。 只要添加占位符元素,就可以在伪类之前或之后使用或者自动插入元素,然后添加flex:1和限制。
在线预览:
代码沙箱地址
代码:
.container {
display: flex;
}
// 左右侧留白
.left,
.right {
flex: 1;
max-width: 200px;
}
// 中间留白
.center {
flex: 1;
min-width: 150px;
}
<div class="container">
<div class="left"></div>
<div>Content A</div>
<div class="center"></div>
<div>Content B</div>
<div class="right"></div>
</div>
中间文本截断
要求:文件名页面必须显示文件扩展名,非扩展名部分溢出时显示省略号。
短文件名:
长文件名:
首先需要使用JS对文件名进行修剪css中字体大小,将其拆分为两部分:非扩展部分和扩展部分,并将它们放置在两个相邻的元素中。 当文件名长于父级时,右侧元素的长度取决于内容。 当达到最大值时,文本将被截断以显示缩写,并且左侧元素与右侧元素一起向右移动,始终保持自己的长度而不缩放。
对于这样的问题,很自然的想到了flex-shrink。 flex-shrink用于设置当父元素的长度大于所有子元素长度之和时(即子元素会超过父元素),子元素如何收缩长度。
在线预览:
代码沙箱地址
代码:
<style>
.container {
display: flex;
}
.left {
flex-shrink: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right {
white-space: nowrap;
}
</style>
<div class="row">
<span class="left">超长的文件名超长的文件名超长的文件名超长的文件名
<span class="right">.jpeg
这种方法有一个缺陷,就是缩写和两边的字符之间有一定的间隙css中字体大小,但是当字体较小时就不那么明显了。 使用JS可以解决这个问题,用JS实现需要估算字符的长度。 由于字符长度不一致,无法采用字号*字宽的方法。 需要向元素中插入字符,然后获取元素的长度。 对于很长的列表,这种方法成本太高。 权衡利弊,所以选择flex来实现。
垂直排列
需求:实现类似右图垂直排列的布局。 父元素的高度有限,长度取决于子元素,子元素的宽度和高度取决于内容,子元素按照从上到下、从左到右的顺序排序。
一开始我以为使用flex-flow:columnwrap可以很快实现,但是我愿意去做,顺便也发现了flex布局的缺点。 我给父元素添加了边框,这样我就可以看到父元素的长度。
设置 flex-flow:columnwrap 后; align-content:flex-start;,父元素之间的距离始终为100%,但要求是长度取决于子元素之间的距离。 在这种情况下,您需要添加一个 display:inline-block 元素。
添加inline-block元素后,父元素的长度只等于一列子元素的长度,这显然不符合预期。 如果使用 display:inline-flex 代替 display:flex 会怎样?
同样的疗效,看来flex还是略逊于这种布局。 这时候就需要用到很多人平时不注意的wirte-mode这个属性了。 wirte-mode 属性定义块级元素中文本的水平或垂直排列以及文本的行进方向。
MDN 文档:写入模式
功效:
在线预览:
代码沙箱地址
代码:
<style>
.list {
display: inline-block;
height: 200px;
font-size: 0;
writing-mode: vertical-lr;
}
.item {
display: inline-block;
margin: 5px 5px;
width: 150px;
height: 40px;
line-height: 40px;
border-radius: 4px;
font-size: 14px;
text-align: center;
color: #fff;
background: #00a0e9;
list-style: none;
writing-mode: horizontal-tb;
}
.item:nth-child(2),
.item:nth-child(10) {
height: 90px;
line-height: 90px;
}
</style>
<ul class="list">
<li class="item">1
<li class="item">2
<li class="item">3
<li class="item">4
<li class="item">5
<li class="item">6
<li class="item">7
<li class="item">8
<li class="item">9
<li class="item">10
<li class="item">11
<li class="item">12
来源于:
发表评论