您现在的位置是:首页> 网站开发

flex-flow详解

  • 4629人已阅读
  • 时间:2020-02-25 00:17:04
  • 分类:网站开发
  • 作者:祥哥

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。
flex-direction 属性规定灵活项目的方向。
flex-wrap 属性规定灵活项目是否拆行或拆列。
注意:如果元素不是弹性盒对象的元素,则 flex-flow 属性不起作用。

什么是弹性盒模型?

弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小。 弹性盒模型的提出可以解决一些响应式布局的需求

 

如何使用弹性盒模型?

建立弹性盒模型: 给父级设置css属性display: flex; 即可。

若子集宽度大于父级宽度则子集会整体压缩或者给子集设置css属性flex-shrink: 1;浏览器会根据flex-shrink的比值进行按比例缩放。

若子集宽度小于父级宽度则可给子集设置flex-grow: 1;浏览器会根据flex-grow的比值按比例扩大,将剩余部分分布给子集元素

 

在弹性盒模型中,我们把父级叫做容器 子集叫做项目

描述实例
row默认值。灵活的项目将水平显示,正如一个行一样。尝试一下 »
row-reverse与 row 相同,但是以相反的顺序。尝试一下 »
column灵活的项目将垂直显示,正如一个列一样。尝试一下 »
column-reverse与 column 相同,但是以相反的顺序。尝试一下 »
initial设置该属性为它的默认值。请参阅 initial尝试一下 »
inherit从父元素继承该属性。请参阅 inherit
nowrap默认值。规定灵活的项目不拆行或不拆列。
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
initial设置该属性为它的默认值。请参阅 initial
inherit从父元素继承该属性。请参阅 inherit


Top