Flex布局详解

Flex 布局是一种用于页面布局的 CSS3 特性，它给开发者带来了方便、快捷且灵活的布局方式，因此备受开发者的青睐。那接下来我们就通过阮一峰老师的语言，从多个方面对 Flex 布局进行详细阐述。

一、基本概念

1、Flex容器(container)和Flex项目(item)

Flex 容器是一个 DOM 元素，它的所有子元素都是 Flex 项目。而 Flex 项目则是一个 Flex 容器的直接子元素。下面是一个简单的代码示例：

.container {
  display: flex;
}

.item {
  /* 作为 Flex 项目时的属性 */
}
<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

2、Flex容器的主轴和交叉轴

当通过 display: flex; 将一个容器设置为 Flex 容器后，它的子元素就可以利用 Flex 的强大布局方式了。在 Flex 布局中，有两个概念非常重要：主轴和交叉轴。

主轴是 Flex 容器的主要方向，我们可以使用 justify-content 属性来设置主轴上的对齐方式，而 Flex 项目则默认在主轴上排列。

交叉轴则是主轴所在的垂直于它的方向。我们可以使用 align-items 和 align-content 属性来设置交叉轴的对齐方式。

二、Flex属性详解

1、flex-direction 属性

flex-direction 是用来设置主轴的方向。默认值是 row，表示主轴从左向右排列。下面的例子将主轴方向设置为从上至下：

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

2、justify-content 属性

justify-content 是用来设置主轴上的对齐方式。默认值是 flex-start，表示 Flex 项目在主轴上排列时，都是靠左对齐。下面的例子将主轴方向设置为从上至下，并将 Flex 项目在主轴上的对齐方式设置为居中：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

3、align-items 和 align-content 属性

align-items 和 align-content 属性用来设置交叉轴上的对齐方式。align-items 属性主要作用于单行的 Flex 容器，而 align-content 则作用于多行的 Flex 容器。下面的例子将主轴方向设置为从上至下，并将 Flex 项目在交叉轴上的对齐方式设置为居中：

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

三、Flex项目属性详解

1、order 属性

order 是用来设置 Flex 项目的排列顺序。该属性接受一个整数值，默认值为 0。当多个 Flex 项目的 order 属性不同时，会按照 order 值的大小进行排序，从小到大排序。下面的例子将第一项项目的 order 属性设置为 2，第二项项目的 order 属性设置为 -1，第三项项目的 order 属性设置为 3，效果如下：

.item:nth-child(1) {
  order: 2;
}

.item:nth-child(2) {
  order: -1;
}

.item:nth-child(3) {
  order: 3;
}

2、flex-grow 属性和 flex-shrink 属性

flex-grow 和 flex-shrink 属性用来控制 Flex 项目的自适应能力。其中，flex-grow 属性表示 Flex 项目在分配剩余空间时，所占据的比例值；flex-shrink 属性则表示 Flex 项目在空间不足时，所占据的比例值。下面的例子将第一项项目的 flex-grow 属性设置为 1，第二项项目的 flex-grow 属性设置为 2，第三项项目的 flex-grow 属性设置为 3，效果如下：

.item:nth-child(1) {
  flex-grow: 1;
}

.item:nth-child(2) {
  flex-grow: 2;
}

.item:nth-child(3) {
  flex-grow: 3;
}

3、flex-basis 属性和 flex 属性

flex-basis 属性和 flex 属性用来设置 Flex 项目的占比大小。其中，flex-basis 表示 Flex 项目在不受强制约束的情况下所占据的空间大小，flex 属性则用于将 flex-grow、flex-shrink 和 flex-basis 三个属性合并成一行。下面的例子将第一项项目的 flex-basis 属性设置为 30%，第二项项目的 flex 属性设置为 2 1 auto，第三项项目的 flex 属性设置为 3 1 100px，效果如下：

.item:nth-child(1) {
  flex-basis: 30%;
}

.item:nth-child(2) {
  flex: 2 1 auto;
}

.item:nth-child(3) {
  flex: 3 1 100px;
}

四、Flex布局实用技巧

1、自定义Flex项目间距

在默认情况下，Flex 项目之间是没有间距的。然而，在实际开发中，我们经常需要在 Flex 项目之间添加一些间距。下面就是一个简单的代码示例，将 Flex 项目之间设置成 20px 的间距：

.item + .item {
  margin-left: 20px;
}

2、应用Flex布局时，父元素不覆盖子元素

再使用 Flex 布局时，我们经常会遇到这么一种情况：父元素没有设置高度，而子元素却设置了高度，导致父元素将其覆盖。下面通过在最后一个项目上添加一个 margin-bottom: auto; 来解决这个问题：

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

.item:last-child {
  margin-bottom: auto;
}

3、Flex项目自动换行

当 Flex 容器的空间不足以容纳所有Flex 项目时，Flex 项目会自动换行。下面是一个简单的代码示例：

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

五、总结

本文通过多个方面对 Flex 布局进行了详细阐述。从基本概念、Flex 属性详解、Flex 项目属性详解以及 Flex 布局实用技巧四个方面进行了详细介绍。希望阮一峰老师原创的这篇文章对大家在开发中应用 Flex 布局有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/295390.html