Flex 参数 - CSS

Flexbox 是 CSS3 中用来实现弹性盒子布局的一种布局方式。它能够帮助我们实现灵活的、基于容器的布局。Flexbox 包含一些用于定义和控制盒子内部元素位置、大小、方向和流动的属性，称为 Flexbox 属性。

定义 Flex 容器

• display: flex：使用 Flexbox 布局，将容器子元素布局在一条水平或垂直轴上。如需在 IE11+ 上使用，请使用 display: -webkit-flex 。
• display: inline-flex：同上，但将容器布局于一个内联块容器中。如需在 IE11+ 上使用，请使用 display: -webkit-inline-flex 。

容器的基本概念

一个 flex 容器包含以下主要组件：

• 主轴（main axis）：经过 flex 容器中所有元素、沿着容器的排列方向。
• 交叉轴（cross axis）：垂直于主轴的轴线。

主轴属性

使用以下属性可以控制 flex 容器在主轴上的布局行为：

• flex-direction：指定主轴的方向。默认值是 row。可以取的值有：
  • row：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上方。
  • column-reverse：主轴为垂直方向，起点在下方。
• flex-wrap：定义如何换行。默认情况下是 nowrap。可以取的值有：
  • nowrap：不换行。
  • wrap：在需要换行时，优先在主轴上拉伸元素，比起让元素溢出容器边界好。
  • wrap-reverse：与 wrap 值相同，但同时交叉轴也反转。
• justify-content：定义了浏览器如何分配主轴上的额外空间，可通过以下值来进行设置：
  • flex-start：左对齐（默认值）。
  • flex-end：右对齐。
  • center：居中。
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
  • space-evenly：每个项目的间隔相等。

交叉轴属性

使用以下属性可以控制 flex 容器在交叉轴上的布局行为：

• align-items：定义 flex 容器内各元素在交叉轴上的对齐方式，可通过以下值来进行设置：
  • stretch：（默认值）如果元素未指定高度或设为 auto，将占满整个容器高度。
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline：项目的第一行文字的基线对齐。
• align-content：定义多根轴线（当容器内有多行元素或元素被强制换行）的对齐方式。可通过以下值来进行设置：
  • stretch：（默认值）轴线占满整个交叉轴。
  • flex-start：与交叉轴起点对齐。
  • flex-end：与交叉轴终点对齐。
  • center：与交叉轴中点对齐。
  • space-between：各行间的间隔平均分布。
  • space-around：各行两端的间隔平均分布。
  • space-evenly：各行间的间隔，包括交叉轴的起点和终点，平均分布。

项目属性

在 flex 容器内部，每个项目可以利用以下属性来进行布局：

• order：定义项目在 flex 容器内的顺序。数值越小，排列越靠前，默认为 0。
• flex-grow：定义了项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
• flex-shrink：定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
• flex-basis：定义项目在分配多余空间之前，占据主轴方向的空间，如 100px。
• flex：是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个参数可选，都有默认值。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。可取值与 align-items 相同。

示例

让我们看一下基本示例来演示如何使用这些 flexbox 属性：

/* 设置容器为 flex 布局 */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* 定义 flex-item 的样式 */
.flex-item {
  /* 设定沿着主轴排放 */
  order: 1;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 20%;
  height: 100px;
  background: #eee;
  margin: 10px;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
}

以上代码中，.container 是一个具有 flexbox 布局的容器，.flex-item 是该容器中的子元素。这个示例设置了以下 flexbox 属性：

• 使用 flex 布局，将容器子元素布局在一行中，沿着主轴方向上的水平轴线上。
• 设置容器允许换行，因此当子元素太多而不能放在一行时，将会在新行中重新开始一个子元素。
• 定义项目在主轴方向上水平居中，并在交叉轴方向上垂直居中。
• 定义每个项目都要占用主轴方向 20% 的空间。如果它们在容器中没有足够的空间，那么它们会被缩小，以适应容器的大小。
• 定义项目在交叉轴方向上都居中对齐，根据项目中最高的元素而定位。

以上示例仅用于演示如何使用 flexbox，还有其他许多属性可以用来控制您的布局，可根据需要选择使用。

以上即为 Flex 参数 - CSS，希望对您有所帮助！