DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!
flex
属性是 弹性盒布局模块 的子属性。
这是 flex-grow
、flex-shrink
和 flex-basis
的简写形式。第二个和第三个参数(flex-shrink
和 flex-basis
)是可选的。
语法
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
.flex-item {
/* this */
flex: 1 100px;
/* is the same as */
flex-grow: 1;
flex-basis: 100px;
/* and it leaves the flex-shrink property alone, which would be */
flex-shrink: inherit; /* defaults to 1 */
}
以下是根据您提供的参数值映射到的内容
flex: none /* value 'none' case */
flex: <'flex-grow'> /* One value syntax, variation 1 */
flex: <'flex-basis'> /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'> /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'> /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'> /* Three values syntax */
flex: inherit
flex
的常用值
flex: 0 auto;
这与 flex: initial;
相同,并且是默认值的简写形式:flex: 0 1 auto
。它根据项目的 width
/height
属性(如果未设置,则根据其内容)来设置项目的大小。
当剩余一些可用空间时,它使弹性项目变得不灵活,但在空间不足时允许它缩小到最小。可以使用对齐功能或 auto
边距沿主轴对齐弹性项目。
flex: auto;
这相当于 flex: 1 1 auto
。注意,这不是默认值。它根据项目的 width
/height
属性设置项目的大小,但使其完全灵活,以便它们吸收沿主轴的任何额外空间。
如果所有项目都是 flex: auto
、flex: initial
或 flex: none
,则在项目大小确定后,任何剩余的空间将平均分配给 flex: auto
的项目。
flex: none;
这相当于 flex: 0 0 auto
。它根据项目的 width
/height
属性设置项目的大小,但使其完全不灵活。
这类似于 flex: initial
,但它不允许缩小,即使在溢出情况下也是如此。
flex: <positive-number>
相当于 flex: 1 0px
。它使弹性项目变得灵活并将弹性基准设置为零,从而产生一个接收剩余空间指定比例的项目。
如果弹性容器中的所有项目都使用此模式,则它们的大小将与指定的弹性因子成比例。
演示
以下演示显示了一个使用 Flexbox 的非常简单的布局,这要归功于 flex
属性。
这是相关的代码片段
.header,
.footer { flex: 1 100%; }
.sidebar { flex: 1; }
.main { flex: 2; }
首先,我们使用 flex-flow: row wrap
授权弹性项目在多行上显示。
然后我们告诉页眉和页脚无论如何都要占据当前视口宽度的 100%。
主要内容和两个侧边栏将共享同一行,并按如下方式共享剩余空间:主要内容为 66%(2/(1+2)),侧边栏为 33%(1/(1+2))。
相关属性
其他资源
浏览器支持
- (现代)表示规范中的最新语法(例如
display: flex;
) - (混合)表示 2011 年的奇怪的非正式语法(例如
display: flexbox;
) - (旧版)表示 2009 年的旧语法(例如
display: box;
)
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
21+(现代) 20-(旧版) |
3.1+(旧版) | 2-21(旧版) 22+(新版) |
12.1+(现代) | 10+(混合) | 2.1+(旧版) | 3.2+(旧版) |
Blackberry 浏览器 10+ 支持新语法。
有关如何混合语法以获得最佳浏览器支持的更多信息,请参阅 这篇文章(CSS-Tricks) 或 这篇文章(DevOpera)。
尽管我非常希望此属性能够在每个浏览器中都能正常工作(因为它似乎在使网站设计灵活方面提供了很大的帮助,双关语),但它似乎除了 Chrome 和 Firefox 之外,在其他任何浏览器中都无法正常工作。我在 EI 10、Opera 和 Safari 上尝试过 Abode Pen,但它就是无法正常工作,只会显示 4 列,这些列甚至没有以任何方式换行其内容。
今天它在(在 Redmond OS 上测试)IE 11、FF 33.1、Chrome 39 和 Opera 26 上运行良好。
只有 Safari 没有换行内容,使其成为水平混乱,通常在该浏览器上看起来不专业且不好。太糟糕了,因为它在 CSS 中是最重要的内容之一。
精彩的写作!
此外,请注意,如果您需要支持旧版浏览器并且没有使用 flex 的优势(例如 IE8、IE9),请查看 Ben Frains 的 使用表格进行样式设置。
弹性盒是否会影响 Bootstrap 列的堆叠中断?
Safari 浏览器尚未支持 Flex Wrap。
这对我的问题来说是一个问题。
这在 Mac 上的 FF 43 上不起作用。在全宽下效果很好,但 Main 是流动的,而侧边栏保持原始宽度,直到断点。在断点处,固定宽度左侧侧边栏和流体 Main 填充一行,而右侧侧边栏则占据整个下一行。
只想了解弹性盒是否会影响 Bootstrap 列的结构?
在以下代码片段中
/* 并保留 flex-shrink 属性,其默认值为 /
flex-grow: inherit; / 默认值为 1 */
flex-grow 不应该是 flex-shrink 吗?
是的,这可能是一个错误……。
如果
flex: 1 auto;
而不是
flex: 1; /* flex: 1 1 0; */
我不理解 flex-shrink: auto 是如何工作的。
<
blockquote> 以下是相关的代码片段
什么是代码的“片段”?
我认为这是一个简单的错别字,
bit
是预期的单词。.header,
.footer { flex: 1 100%; }
.sidebar { flex: 1; }
.main { flex: 2; }