深入探讨flex-flow属性

发布时间：2023-05-20

在CSS布局中，弹性盒子模型（Flexbox）可以方便地实现对容器内元素的排列和布局调整。flex-flow属性是Flexbox中一个较为重要的属性，它能够控制弹性盒子模型中的主轴和交叉轴方向上的排列方式。本文将从多个方面对flex-flow属性进行详细阐述。

一、Flexflow属性的取值有

flex-flow属性可以取两个值，分别是flex-direction和flex-wrap。其中，flex-direction用于控制主轴的方向，而flex-wrap用于控制子元素是否换行。两个值可以组合使用，使用空格隔开。

.container {
  flex-flow: row wrap;
}

在上述代码中，flex-flow的取值为row wrap。这表示flex容器子元素按行排列，并在行尽可能地填满，当子元素放不下时自动换行。

二、Flex的属性有哪些

Flex布局在弹性盒子中使用，flex布局有两类属性：容器属性和项目属性。容器属性和项目属性数都比较多，这里只针对与flex-flow属性相关的进行阐述。

1. 容器属性

容器属性主要用于控制容器的排列和布局方式，其中flex-direction和flex-wrap是关键的两个属性。

  • flex-direction：控制flex容器的主轴方向。可取值为row、row-reverse、column、column-reverse。
  • flex-wrap：控制flex容器的子元素是否换行。可取值为nowrap、wrap、wrap-reverse。
  • ...（其他属性省略）

2. 项目属性

项目属性主要用于控制各个项目在flex容器中的位置和大小。

  • flex-grow：控制元素在空间增大时的扩展比例。
  • flex-shrink：控制元素在空间减小时的收缩比例。
  • ...（其他属性省略）

三、Overflow属性值有哪些

Overflow属性可用于控制子元素在容器中的溢出部分的表现方式。值得注意的是，Overflow属性仅在容器具有一定高度（或宽度）时才生效。

  • overflow: visible：子元素溢出的部分直接显示，超出容器的部分无法遮盖其他内容。
  • overflow: hidden：子元素溢出的部分被隐藏，不能被显示。
  • overflow: scroll：在容器区域内加上滚动条，以便于查看子元素可见部分以外的内容。
  • overflow: auto：在子元素溢出时，自动选择scroll或visible。

四、Flexgrow属性的作用是

flex-grow属性用于控制弹性盒子中子项目在可用空间增大时的伸展比例。具体来说，如果一个项目的flex-grow属性为2，而另外一个项目的flex-grow属性为1，则前一个项目在可用空间增加时会占用两倍于后一个项目的空间。

.item {
  flex-grow: 1;
}

在上述代码中，.item元素的flex-grow属性值为1。这表示该元素在空间增加时，会按照1:1的比例进行伸展。

五、Flexshrink属性

flex-shrink属性用于控制弹性盒子中子项目在可用空间减小时的收缩比例。flex-shrink属性的默认值为1。

.item {
  flex-shrink: 0;
}

在上述代码中，.item元素的flex-shrink属性值为0。这表示该元素在空间减小时不会进行收缩。

六、Overflowauto属性

overflow-auto属性是overflow属性的一个取值，在子元素发生溢出时，自动为容器添加滚动条，以便于查看溢出部分。它的表现形式和overflow: scroll很像，但具体实现上又有所不同。

.container {
  overflow: auto;
}

在上述代码中，.container元素的overflow属性值为auto。这表示该元素在发生溢出时会自动增加滚动条。

七、Flex的三个属性

flex属性是flex-grow、flex-shrink和flex-basis的简写。flex-grow和flex-shrink的含义在前面已经有所介绍。下面着重解释一下flex-basis。 flex-basis属性用于定义元素未设置flex属性的大小。它的默认值为auto，在不设置值时，元素的宽度由内容决定。如果需要设置宽度，建议配合其他属性来使用。

.item {
  flex: 1 1 20%;
}

在上述代码中，.item元素的flex属性值为1 1 20%。这表示该元素在容器中的占比为20%，并且在可用空间增大时，该元素会按照1:1的比例自适应增加空间。

八、Flexwrap属性的作用是

flex-wrap属性用于控制flex容器内子元素的排列方式。它的值可以是nowrap、wrap、wrap-reverse。其中，nowrap表示所有子元素不换行，而wrap和``wrap-reverse`则使子元素换行。

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

在上述代码中，.container元素的flex-wrap属性值为wrap-reverse。这表示该容器在放不下元素时，会按照列为主进行展示。

九、Flexflow框架

Flexflow是一个基于Flexbox的布局框架。它封装了很多常用的Flexbox属性和常见布局。使用Flexflow可以简便地实现各种布局方式，让开发者能够更加专注于业务开发。 下面给出一个Flexflow的示例代码：

.flex-child {
  width: 100px;
  height: 100px;
}
.flex-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flex-flow__item1 {
  flex-shrink: 1;
  flex-grow: 1;
}
.flex-flow__item2 {
  align-self: center;
}
.flex-flow__item3 {
  flex-shrink: 0;
}
.flex-flow__item4 {
  flex-basis: 200px;
}
.flex-flow__item5 {
  flex: 1 1 50px;
}
.flex-flow__item6 {
  flex: 2 2 auto;
}
.flex-flow__item7 {
  font-size: 16px;
  margin-left: auto;
}
.flex-flow__item8 {
  margin-left: auto;
}

在上述代码中，Flex容器的样式被封装在.flex-flow中。而Flex容器中每个元素则定义了不同的flex属性，用于满足不同的布局需求。

十、Flexflow抗性选取

Flexflow的抗性选取是指在Flexbox布局排版时，如何优先考虑哪些元素的位置和空间需求。根据W3C的定义，抗性是Flex元素（flex item）在分配大量可用空间时表现抗性的能力。 在经典的Flexbox设计模式中，抗性被划分为三种，分别是flex-grow、flex-shrink和flex-basis。其中，flex-grow表示元素占用剩余空间的比例，flex-shrink表示容器尺寸变小时收缩的比例，flex-basis表示元素的最大可用尺寸。 除了这三个属性，W3C还定义了flex-basis、min-width、max-width、min-height和max-height等属性，但是它们的优先级比较低。

总结

本文对于Flexbox布局中的flex-flow属性从多个方面进行了详细的阐述，包括属性取值、容器属性、项目属性、overflow属性、flex-grow属性、flex-shrink属性、overflow:auto属性、Flex三个属性、flex-wrap属性和Flexflow框架。了解了这些属性的细节，相信开发者可以更加灵活地运用Flexbox布局，制作出更加美观实用的页面。

推荐文章