flex

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费积分!

flex 属性是 弹性盒布局模块 的子属性。

这是 flex-growflex-shrinkflex-basis 的简写形式。第二个和第三个参数(flex-shrinkflex-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: autoflex: initialflex: 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)