CSS flex-flow 属性

CSS flex-flow 属性

CSS flex-flow 属性是 flex 容器的缩写属性，用于设置 flex 容器的主轴方向和换行方式。该属性的值包括两个子属性：flex-direction 和 flex-wrap。

flex-direction

flex-direction 属性用于设置 flex 容器内的 flex 项目的排列方向。

可选值

  • row：默认值，flex 项目按照行排列，主轴为水平方向。
  • row-reverse：与 row 相同，但是主轴方向相反。
  • column：flex 项目按照列排列，主轴为竖直方向。
  • column-reverse：与 column 相同，但是主轴方向相反。

实例

.container {
  display: flex;
  flex-direction: row;
}

flex-wrap

flex-wrap 属性用于设置 flex 容器内的 flex 项目的换行方式。

可选值

  • nowrap：默认值，不允许换行。
  • wrap：允许换行。
  • wrap-reverse：与 wrap 相同，但是换行后主轴方向相反。

实例

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的缩写属性，用于同时设置它们两个。

实例

.container {
  display: flex;
  flex-flow: row wrap;
}

以上代码等价于：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

结语

CSS flex-flow 属性是灵活性布局的重要属性之一，通过设置主轴方向和换行方式，能够实现各种灵活的布局方案。在实际开发中，需要根据具体的场景和需求来选择合适的属性值。

CSS flex-direction 属性 CSS flex-grow 属性