css技术文章
- CSS 属性选择器
- 传真:popover Attribute
- • 如何克服高温和高超的超高超属性
- A. 自动电文
- 混合混合模式:倍增
- CSS用户选择
- 防止正文滚动
- 画布过滤器
- 使用CSS Flexbox反转元素顺序
- Shoelace.css:回归基础的css入门套件
- 使用Flexbox创建间隔器
- 8位十六进制颜色
- 响应式IFRAME
- 如何使用JavaScript获取和设置CSS变量值
- CSS省略号字符串开头
- CSS:显示占位符
- CSS:焦点在
- CSS渐变文本
- CSS更喜欢精简运动媒体查询
- 如何创建CSS技巧自定义滚动条
- 用于复制和粘贴的屏幕外文本
- CSS背景重复:圆形
- 删除搜索输入清除(x)图标
- Shoelace 2.0:一个前瞻性的Web组件库
- 如何检测粘性元素何时被钉住
- 检测CSS溢出元素
- 输入数字时始终显示箭头
- 一行代码中的黑暗模式!
- CSS强调色
- CSS:可选
- CSS:自动填充
- CSS::文件选择器按钮
- CSS内容可见性
使用Flexbox创建间隔器
在flexbox问世之前,我是它最大的粉丝之一,但由于在Mozilla被调动,我从未有机会在任何实践项目中使用它;因此,flexbox对我来说仍然是一个谜。这让我非常痛苦,因为我觉得自己被排除在flexbox革命之外,尽管这些天我听到的情绪是flexbox最终失败了,CSS网格是新的热点。
flexbox的一个很棒的实用程序是间隔器。过去的一个问题是将项目停靠在左边,项目停靠在右边,但需要通过绝对定位来实现。使用flexbox可以很容易地实现这种效果,而无需固定的元素大小或JavaScript宽度计算。
The HTML
让我们假设一个非常简单的结构,包括一个父对象、一个左右子对象和一个间隔符:
<span class="parent"> <span class="left-buttons"></span> <span class="spacer"></span> <span class="right-buttons"></span> </span>
垫片将是空的。
The CSS
CSS将基于flexbox:
.parent { display: flex; } .spacer { flex-grow: 1; }
关键是有一个<code>display:flex</code>的父项,而<code>flex growt:1</code>的间距。无论左右两边有多宽,间隔符都会占用剩余空间。如果左右两边的空间比可用空间大。。。然后事情就被推来推去。
See the Pen
by David Walsh ( ) on .