JavaScript Flex 弹性布局|极客笔记

JavaScript Flex 弹性布局

什么是弹性布局

弹性布局（Flex）是一种新型的网页布局方式，也是 CSS3 新增的模块之一。它提供了一种更加灵活的方式来布局和排列网页元素，使得网页在不同的屏幕尺寸和设备上都能够自适应并呈现出较好的效果。

在传统的网页布局中，我们通常使用盒状模型（Box Model）来布局。我们通过设置元素的宽度、高度、margin、padding、position 等属性来实现对元素的定位和排列。而弹性布局则采用了容器-项目的模型，通过设置容器的属性来控制项目的排列和分配空间的方式。

弹性布局的特点包括：

容器具有弹性：容器可以根据内容的大小自动调整自身的宽度和高度。
项目的弹性分配：容器内部的项目可以根据需要自动分配剩余空间。
适应不同屏幕尺寸：弹性布局可以很好地适应不同屏幕尺寸和设备。

弹性容器和弹性项目

在弹性布局中，容器和项目是核心概念。

容器（Container）用来包裹项目（Item），可以理解为一个父级元素。容器需要设置 display: flex; 属性来声明自己是一个弹性容器。

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

项目（Item）是容器内部的每个元素。项目的排列顺序默认是按照源代码中的顺序排列的，但可以通过设置 order 属性来调整排列顺序。

.item {
  order: 2;  /* 将该项目放在第二个位置 */
}

弹性容器的属性

弹性容器具有一些常用的属性，用来控制项目的排列和空间分配。

flex-direction

flex-direction 属性用来设置项目的排列方向，默认值为 row。

取值有：

row：水平排列，起点在左侧。
row-reverse：水平排列，起点在右侧。
column：垂直排列，起点在上方。
column-reverse：垂直排列，起点在下方。

.container {
  flex-direction: row;  /* 默认值，水平排列 */
}

.container {
  flex-direction: column;  /* 垂直排列 */
}

flex-wrap

flex-wrap 属性用来设置项目是否换行，默认值为 nowrap。

取值有：

nowrap：不换行，将项目全部挤在一行内。
wrap：换行，根据容器的宽度自动调整项目的排列方式。

.container {
  flex-wrap: nowrap;  /* 默认值，不换行 */
}

.container {
  flex-wrap: wrap;  /* 换行 */
}

flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写形式。两个属性的取值以空格分隔。

.container {
  flex-flow: row nowrap;  /* 默认值，水平排列不换行 */
}

.container {
  flex-flow: column wrap;  /* 垂直排列换行 */
}

justify-content

justify-content 属性用来设置项目在主轴上的对齐方式，默认值为 flex-start。

取值有：

flex-start：项目在主轴起点对齐。
flex-end：项目在主轴终点对齐。
center：项目在主轴中间对齐。
space-between：项目在主轴上均匀分布，首尾项目分别对齐于容器的起点和终点。
space-around：项目在主轴上均匀分布，各项目之间的间距相等，首尾项目距离容器的起点和终点的距离是其他项目间距的一半。

.container {
  justify-content: flex-start;  /* 默认值，项目在主轴起点对齐 */
}

.container {
  justify-content: flex-end;  /* 项目在主轴终点对齐 */
}

align-items

align-items 属性用来设置项目在交叉轴上的对齐方式，默认值为 stretch。

取值有：

stretch：项目在交叉轴上拉伸，填满整个容器。
flex-start：项目在交叉轴起点对齐。
flex-end：项目在交叉轴终点对齐。
center：项目在交叉轴中间对齐。
baseline：项目在交叉轴上以第一行文本的基线对齐。

.container {
  align-items: stretch;  /* 默认值，项目在交叉轴上拉伸 */
}

.container {
  align-items: center;  /* 项目在交叉轴中间对齐 */
}

align-content

align-content 属性用来设置多行项目在交叉轴上的对齐方式，默认值为 stretch。

取值有：

stretch：多行项目在交叉轴上拉伸，填满整个容器。
flex-start：多行项目在交叉轴起点对齐。
flex-end：多行项目在交叉轴终点对齐。
center：多行项目在交叉轴中间对齐。
space-between：多行项目在交叉轴上均匀分布，首尾项目分别对齐于容器的起点和终点。
space-around：多行项目在交叉轴上均匀分布，各行之间的间距相等，首尾行距离容器的起点和终点的距离是其他行间距的一半。

.container {
  align-content: stretch;  /* 默认值，多行项目在交叉轴上拉伸 */
}

.container {
  align-content: space-between;  /* 多行项目在交叉轴上均匀分布 */
}

弹性项目的属性

弹性项目也有一些常用的属性，用来控制项目在容器内的表现。

flex

flex 属性用来设置项目的放大比例、缩小比例和初始大小，默认值为 0 1 auto。

第一个值是放大比例，默认为 0，表示不放大。
第二个值是缩小比例，默认为 1，表示如果空间不足，项目将缩小。
第三个值是初始大小，默认为 auto，表示项目的初始大小由其内容决定。

.item {
  flex: 1;  /* 放大比例为1，缩小比例为1，初始大小为auto */
}

.item {
  flex: 0 2 200px;  /* 放大比例为0，缩小比例为2，初始大小为200px */
}

align-self

align-self 属性用来设置单个项目在交叉轴上的对齐方式，覆盖容器的 align-items 属性。

取值与 align-items 属性一致。

.item {
  align-self: flex-start;  /* 项目在交叉轴起点对齐 */
}

.item {
  align-self: center;  /* 项目在交叉轴中间对齐 */
}

示例代码

以下是一个简单的示例代码，展示了弹性布局的使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .item {
      flex: 0 0 200px;
      height: 200px;
      background-color: lightblue;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

运行结果如下图所示：

-----------------------------
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 | Item 6 |
-----------------------------

以上示例中，.container 是弹性容器，.item 是弹性项目。使用弹性布局将项目均匀排列在容器内，实现了自适应和屏幕适配的效果。

总结

弹性布局（Flex）是一种灵活且强大的网页布局方式。通过设置弹性容器和项目的属性，可以轻松实现不同排列方向、自适应和响应式布局。

掌握弹性布局的基本属性和使用方法，可以提高网页布局的效果和开发效率。在实际项目中，根据需要结合其他 CSS 属性和技巧，在不同的场景下灵活应用弹性布局，将网页呈现的效果发挥到极致。

JavaScript Flex 弹性布局