CSS3弹性盒

flex属性在CSS新弹性盒模型中是比较常用的，本文将带你深入理解flex属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上flex的实例，希望能够对你有所帮助。

flex定义和用法

flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

默认值：看各分拆属性

适用于：弹性盒模型子元素

flex属性值

none：

none关键字的计算值为: 0 0 auto

[ flex-grow ]：

定义弹性盒子元素的扩展比率。

[ flex-shrink ]：

定义弹性盒子元素的收缩比率。

[ flex-basis ]：

定义弹性盒子元素的默认基准值。

flex说明

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

• 如果缩写flex:1, 则其计算值为：1 1 0
• 示例：如下情况每个元素的计算宽是多少

• ---

• flex-grow定义和用法

  flex-grow：<number>

  默认值：0

  适用于：弹性盒模型容器子元素

  继承性：无

  flex-grow属性值

  <number>：

  用数值来定义扩展比率。不允许负值

  flex-grow说明

  设置或检索弹性盒的扩展比率。

• 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
• 示例：b,c将按照1:3的比率分配剩余空间

  ---

  flex-basis定义和用法

  flex-basis：<length> | <percentage> | auto

  默认值：auto

  适用于：弹性盒模型容器子元素

  继承性：无

  flex-basis属性值

  auto：

  无特定宽度值，取决于其它属性值

  <length>：

  用长度值来定义宽度。不允许负值

  <percentage>：

  用百分比来定义宽度。不允许负值

• ---

  flex-flow定义和用法

  flex-flow：[ flex-direction ] || [ flex-wrap ]

  默认值：看各分拆属性

  适用于：弹性盒模型容器

  继承性：无

  flex-flow属性值

  [ flex-direction ]：

  定义弹性盒子元素的排列方向。

  [ flex-wrap ]：

  定义弹性盒子元素溢出父容器时是否换行。

• ---

  flex-direction定义和用法

  flex-direction：row | row-reverse | column | column-reverse

  默认值：row

  适用于：弹性盒容器

  继承性：无

  flex-direction属性值

  row：

  横向从左到右排列（左对齐），默认的排列方式。

  row-reverse：

  反转横向排列（右对齐，从后往前排，最后一项排在最前面。

  column：

  纵向排列。

  row-reverse：

  反转纵向排列，从后往前排，最后一项排在最上面。

• ---

  flex-wrap定义和用法

  flex-wrap：nowrap | wrap | wrap-reverse

  默认值：nowrap

  适用于：弹性盒模型容器

  继承性：无

  flex-wrap属性值

  nowrap：

  当子元素溢出父容器时不换行。

  wrap：

  当子元素溢出父容器时自动换行。

  wrap-reverse：

  反转 wrap 排列。

• order定义和用法

  order：<integer>

  默认值：0

  适用于：弹性盒模型容器子元素

  继承性：无

  order属性值

  <integer>：

  用整数值来定义排列顺序，数值小的排在前面。可以为负值。