深入了解Flex布局：构建灵活响应式布局的利器

站长

2023年09月25日 19:30 · 阅读数 17

原文合集地址如下，有需要的朋友可以关注

Flex布局（Flexible Box Layout）是CSS3中引入的一种强大的布局模型，它为开发人员提供了一种简单而灵活的方式来构建现代网页布局。本文将深入解读Flex布局的核心概念和属性，以及如何应用Flex布局来构建灵活的响应式布局。

什么是Flex布局

Flex布局是一种CSS布局模型，它的目标是为了解决传统布局方式在构建复杂布局时的限制和不足。Flex布局的优势在于它提供了强大的自适应能力和灵活性，使得开发人员能够更轻松地实现水平居中、垂直居中、等高列布局等复杂布局效果。

主轴与交叉轴：

Flex布局涉及到两个主要轴线：主轴和交叉轴。主轴是Flex容器的主要方向，通常是水平方向或垂直方向。而交叉轴是垂直于主轴的轴线。主轴由 flex-direction 定义，可以取 4 个值： row、row-reverse、column、column-reverse 如果你选择了 row 或者 row-reverse，你的主轴将沿着 inline 方向延伸。深入了解Flex布局：构建灵活响应式布局的利器选择 column 或者 column-reverse 时，你的主轴会沿着上下方向延伸 — 也就是 block 排列的方向。

Flex容器的常用属性详解：

flex-direction：控制Flex项目在Flex容器中的排列方向。
justify-content设置子元素在主轴上的对齐方式
- flex-start(默认):起点对齐
- flex-end:终点对齐
- center:居中对齐
- space-between:等间距分布,首尾贴边
- space-around:等间距分布,首尾不贴边
align-items设置子元素在交叉轴上的对齐方式。
- stretch(默认):拉伸填充
- flex-start:起点对齐
- flex-end:终点对齐
- center:居中对齐
- baseline:基线对齐
通过align-self设置单个子元素在交叉轴上的对齐
- auto: 继承父元素的align-items属性,如果没有会取默认值stretch。
- stretch: 拉伸填满整个交叉轴的高度(默认值)。
- flex-start: 元素顶部与交叉轴的起点对齐。
- flex-end: 元素底部与交叉轴的终点对齐。
- center: 元素在交叉轴居中显示。
- baseline: 元素的基线对齐。
align-content：当Flex项目在交叉轴上有多余空间时，控制多行或多列的对齐方式。

#flex-grow、flex-shrink 和 flex-basis

flex-grow、flex-shrink和 flex-basis

flex-grow、flex-shrink 和 flex-basis 是 Flexbox 中非常重要的三个属性,用来控制 flex 项目的尺寸。它们能使我们在主轴方向上控制弹性元素的尺寸和伸缩性。 flex-grow: 定义项目的放大比例,默认为0(即存在剩余空间也不放大)。 flex-shrink: 定义项目的缩小比例,默认为1(空间不足时会缩小)。 flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来大小。

flex-grow 属性：
- flex-grow 属性定义 Flex 项目在可用空间中如何放大。
- 默认值为 0，表示项目不会放大。如果项目具有flex-grow值，则会相对于其他具有更小flex-grow值的项目进行放大。
- 该属性接受一个非负整数值。值越大，项目将在放大阶段占用更多空间。

示例：

.container {
  display: flex;
}

.item {
  flex-grow: 1; /* 所有项目具有相同的 flex-grow 值，将等分可用空间 */
  /* flex-grow: 2;  该项目的放大优先级高，将获得更多的可用空间 */
}

flex-shrink属性：
- flex-shrink 属性定义 Flex 项目在空间不足时如何缩小。
- 默认值为 1，表示项目会相对于其他具有更大 flex-shrink 值的项目进行缩小。
- 该属性接受一个非负整数值。值越大，项目在缩小阶段会占用更少的空间。

示例：

.container {
  display: flex;
}

.item {
  flex-shrink: 1; /* 所有项目具有相同的 flex-shrink 值，将等比例缩小 */
  /* flex-shrink: 2; 该项目的缩小优先级高，将缩小得更多 */
}

flex-basis 属性：
- flex-basis 属性定义了 Flex 项目在分配空间之前的基准大小。它类似于 width 或 height 属性。
- 默认值为 auto，表示项目的原始大小不会受到影响。也可以使用像素值或百分比值来指定项目的基准大小。
- 该属性在不考虑 flex-grow 和 flex-shrink 的情况下，确定项目在主轴上的大小。

示例：

.container {
  display: flex;
}

.item {
  flex-basis: 100px; /* 设置项目的基准大小为 100 像素 */
  /* flex-basis: 50%; 设置项目的基准大小为父容器宽度的一半 */
}

综合示例：

<div class="container">
  <div class="item" style="flex-grow: 1; flex-basis: 100px;">Item 1</div>
  <div class="item" style="flex-grow: 2; flex-basis: 150px;">Item 2</div>
  <div class="item" style="flex-shrink: 1; flex-basis: 200px;">Item 3</div>
</div>

在上述示例中，有三个 Flex 项目，并且分别使用了flex-grow、flex-shrink 和 flex-basis 属性。项目 1 和项目 2 具有不同的flex-grow和 flex-basis 值，这意味着它们会在放大阶段和缩小阶段获得不同的可用空间。项目 3 具有不同的flex-shrink和 flex-basis 值，这意味着它在空间不足时会相对于其他项目缩小得更多。

Flex布局的常见布局实例：

水平居中：使用justify-content来实现Flex项目在主轴上的居中对齐。

.parent{
 display:flex;
 justify-content:center;
}

垂直居中：使用align-items或align-self来实现Flex项目在交叉轴上的居中对齐。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

等高列布局：通过设置flex-grow属性来实现多列等高布局。

HTML 结构：

<div class="container">
  <div class="column">Column 1<br>Content of Column 1</div>
  <div class="column">Column 2<br>Content of Column 2</div>
  <div class="column">Column 3<br>Content of Column 3</div>
</div>

CSS 样式：

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

在这个示例中，我们使用了 Flex 容器 .container 包含了三个列 .column。通过设置 .column 元素的 flex: 1; 属性，每个列都会均分剩余空间，从而实现等高列布局。

底部固定栏：使用margin-top: auto和align-self: flex-end将底部栏固定在Flex容器的底部。将底部固定栏放在 Flex 容器的最底部，并设置容器的属性使其占据剩余空间。以下是一个示例：

HTML 结构：

<div class="container">
  <div class="content">Content goes here</div>
  <div class="footer">This is the fixed footer</div>
</div>

CSS 样式：

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.content {
  flex: 1;
  padding: 20px;
}

.footer {
  flex-shrink: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

在这个示例中，我们使用 Flex 容器 .container 来容纳内容和底部固定栏。通过设置 .container 的 min-height: 100%;，使其至少占满整个屏幕高度，即使内容不够长时，底部固定栏也会保持在底部。

【总结】： Flex布局是一种强大而灵活的布局模型，通过灵活控制Flex容器和Flex项目的属性，我们可以轻松地构建复杂的响应式布局。掌握Flex布局将成为现代网页开发的必备技能，它将带来更好的用户体验和更高的开发效率。