Flex弹性布局详解

Flex弹性布局是一种新的布局模式，可以方便地实现各种布局效果。该布局模式可以让容器的子元素自动排列，在完成一些复杂的布局工作中非常方便。

一、Flex相关的术语

在讨论Flex之前，我们先来了解一些相关的术语：

Flex容器：应用flexbox布局的容器，它包含了一组flex item。
Flex项：Flex容器内的所有子元素都是Flex项，所有Flex项共享Flex容器的父级框架的大小和形状。正是因为这一点，Flex布局才被称为“弹性布局”。

二、Flex容器

2.1 display属性

要使用Flex布局，需要将容器的display属性设置为flex。实现方法如下：

.container {
  display: flex;
}

这个命令将会把“container”这个元素设为Flex容器，这时候，这个Flex容器的直接子元素将会变得可塑性非常强。

2.2 flex-direction属性

Flex容器采用的主轴（main axis）方向，默认为水平方向，即从左到右。用flex-direction属性可以改变主轴的方向。例如：

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

这个命令将把容器的主轴设置为从右到左。

flex-direction属性有四个选择：

row（默认）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.3 justify-content属性

justify-content属性定义了沿着主轴的排版方式。例如：

.container {
  justify-content: flex-end;
}

这个命令将把容器内的所有Flex项沿着主轴松弛地排列为右对齐。

justify-content属性可用于设置六种排版方式：

flex-start（默认）：在主轴的起点方向上，将Flex项紧凑排列。
flex-end：在主轴的终点方向上，将Flex项紧凑排列。
center：在主轴居中排列所有Flex项。
space-between：在相邻的Flex项之间放置平均大小的空间。第一个Flex项的左侧顶格，最后一个Flex项的右侧顶格。
space-around：在相邻Flex项之间分配相等的间隔，使得每个Flex项周围的空间相同。
space-evenly：在相邻Flex项之间分配相等的间隔，包括第一个和最后一个Flex项的周围空间。

2.4 align-items属性

align-items属性定义了沿着侧轴（cross axis）的排版方式。例如：

.container {
  align-items: center;
}

这时Flex项将会沿着容器的侧轴居中排列。

align-items属性也可以设置六种排版方式：

stretch（默认）：所有Flex项用来填满Flex容器的剩余空间，拉伸到相同的高度（如果他们有不同的高度）。
flex-start：Flex项会单独放置在侧轴的起点（上沿，如果flex-direction是row，则为左沿）。
flex-end：Flex项会单独放置在侧轴的终点（下沿，如果flex-direction是row，则为右沿）。
center：Flex项会在侧轴上居中排列。
baseline：所有Flex项将会在同一基线上。
auto：每个Flex项被自由拉升，使得填满容器的剩余空间。如果它们具有基础高度，则不会超出。

2.5 align-content属性

如果项目的个数太少，不足以填满容器，此时可用align-content属性设置多行Flex项的对齐方式。例如：

.container {
  align-content: space-between;
}

这个命令将容器中所有的Flex项在侧轴的方向上平均分布。

align-content属性有六个选择：

flex-start：与侧轴的起点对齐。
flex-end：与侧轴的终点对齐。
center：与侧轴的中点对齐。
space-between：将Flex项彼此分离，第一个Flex项位于侧轴的起点，最后一个Flex项位于侧轴的终点。
space-around：围绕在每个Flex项周围的空间相同。所有Flex项的周围具有相等的空间。
stretch（默认）：Flex项将被拉伸以占用剩余空间。

三、 Flex项

3.1 order属性

默认情况下，Flex项按它们在HTML中的顺序显示。但是可以使用order属性来对Flex项进行排序。它的具体用法如下：

.item {
  order: 5;
}

是的，“order”则是数值越小，排列越靠前。因此，值5的Flex项将在值为0或1的Flex项之后显示。

3.2 flex-grow属性

flex-grow属性定义Flex项的放大比例，可以让它在需要填充空间时扩展。如果所有Flex项设置了相同的放大比例，它们将会平均分配额外的可用空间。例如：

.item {
  flex-grow: 2;
}

在这个例子里，每个Flex项被设置为2，让它们的宽度多一倍。相反地，如果所有Flex项都被设置为0，它们就不会扩张，并且将被居中在Flex容器中，如Section 2.4中所示。

3.3 flex-shrink属性

flex-shrink属性定义Flex项的收缩比例。例如：

.item {
  flex-shrink: 3;
}

这个命令将使Flex项在空间不足时缩小其大小，使它们不会超出父元素。

如果所有Flex项的收缩比例相同，它们将被平均缩小。如果有的Flex项的收缩比例为0，而另一些为非零值，那么在空间不足时，前者不会被缩小，而后者会被缩小。

3.4 flex-basis属性

通过设置flex-basis属性，我们可以设置Flex项的初始大小。类似于width和height属性。例如：

.item {
  flex-basis: 50%;
}

这个命令将使Flex项始终保持50%，但这并不强制。如果你在设置flex-basis值，同时设置flex-grow、flex-shrink，则会覆盖它。

3.5 flex属性

为了能够更简便地设置flex-grow、flex-shrink和flex-basis属性，有一种简写方式，叫做flex。

例如：

.item {
  flex: 1 1 50%;
}

此代码将以相同的速度增长且收缩任何剩余的空间，将Flex项的初始大小设置为50%。

我们也可以使用flex：1来指定一个Flex项的扩张和收缩因子，flex-shrink：1；flex-basis：0%。

这个例子将会使每个Flex项等分共享剩余的空间，但是不会强制Flex项保持任何特定的宽度或高度（如果未设置flex-basis）。

四、示例说明

4.1 示例1：一排卡片

<div class="container">
  <div class="item">卡片1</div>
  <div class="item">卡片2</div>
  <div class="item">卡片3</div>
</div>

.container {
  display: flex;
}
.item {
  width: 30%;
  height: 100px;
  border: 1px solid;
  margin: 10px;
}

这个例子展示了一个顶部对齐的一排卡片。每个卡片之间有10px的间隔。卡片的宽度设为了30%。这样，当卡片数量发生变化时，卡片的宽度就会适应视口大小，非常实用。

4.2 示例2：卡片的展开与折叠

<div class="container">
  <div class="item"><img src="http://dummyimage.com/200x150/000/fff.jpg"/>卡片1</div>
  <div class="item"><img src="http://dummyimage.com/200x150/000/fff.jpg"/>卡片2</div>
  <div class="item"><img src="http://dummyimage.com/200x150/000/fff.jpg"/>卡片3</div>
  <div class="item"><img src="http://dummyimage.com/200x150/000/fff.jpg"/>卡片4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  width: 200px;
  height: 200px;
  margin: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.item img {
  max-width: 100%;
  max-height: 100%;
}
.item:hover {
  flex: 5 1 70%;
  z-index: 2;
}

在这个例子里，我们展示了四个展开缩起的卡片。当鼠标悬停在卡片上时，卡片会根据设置从原来的宽度的增加到了70%的宽度。

五、总结

Flex布局是一个非常实用的CSS布局技巧。在页面布局中，可以使用Flex布局方便地实现各种布局需求。本文中对它的用法做了详细的总结，并提供了两个示例供大家参考。相信对初学者来说是一份比较全面的教程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：flex弹性布局详解 - Python技术站

flex弹性布局详解