flex实例代码

那么我们先来看一个基本的 flex 实例代码：

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

.container {
  /* 设置为flex布局 */
  display: flex;
  /* 设置主轴方向为横向 */
  flex-direction: row;
  /* 主轴方向上的对齐方式为居中对齐 */
  justify-content: center;
  /* 设置交叉轴方向上的对齐方式为居中对齐 */
  align-items: center;
}

.item {
  /* 设置每个项目的占比为1 */
  flex: 1;
  /* 设置每个项目内部元素的对齐方式为居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 定义一个50px的边框和一些其他的样式 */
  border: 1px solid black;
  height: 50px;
}

上面的代码实现了一个三栏布局，每个列宽占比均等，并且列内部的内容居中对齐。下面我们来逐个解释这个代码的作用：

首先，在 HTML 中，我们定义了一个类名为 container 的容器元素和 3 个带有同样类名为 item 的子元素。这样我们就需要通过 CSS 样式来控制它们的布局和样式了。

在 CSS 中，我们首先将 container 元素设置为 display: flex，这样它就成为了一个 flex 布局容器。接着，我们将主轴方向 flex-direction 设置为 row，这样每个子元素就会被水平排列。然后我们将主轴方向上的对齐方式 justify-content 设置为 center，这样每个子元素就会在水平方向上居中对齐。同时，我们还将交叉轴方向上的对齐方式 align-items 设置为 center，这样每个子元素就会在垂直方向上居中对齐。这些属性组合起来就可以实现水平居中和垂直居中的效果。

接着，我们将 item 元素也设置为 display: flex，这样它们就可以成为 flex 容器，在内部还可以控制元素的对齐方式、占比等样式。flex: 1 这个属性可以让每个 item 元素的宽度均等，也就是每个元素都会占据相同的空间。

最后，我们在每个 item 元素中设置一个带有边框的 div 元素，并将其对齐方式设置为居中对齐。这样就可以实现居中对齐和相同的列宽效果了。

下面再给出一个示例，这次我们实现一个带有垂直滚动条的列表布局。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <!-- 以下省略若干项目 -->
</div>

.container {
  /* 设置为flex布局 */
  display: flex;
  /* 设置主轴方向为垂直 */
  flex-direction: column;
  /* 设置交叉轴方向上的对齐方式为顶部对齐 */
  align-items: flex-start;
  /* 限制容器高度，超出时出现滚动条 */
  max-height: 200px;
  overflow: auto;
}

.item {
  /* 设置每个项目的占比为1 */
  flex: 1;
  /* 设置每个项目内部元素的对齐方式为居中对齐 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 定义一个50px的边框和一些其他的样式 */
  border: 1px solid black;
  height: 50px;
}

这次，我们在 .container 容器中设置了 max-height 和 overflow: auto，使其可以控制子元素的垂直滚动。同时，我们将主轴方向 flex-direction 设置为 column，使子元素纵向排列。我们将交叉轴方向上的对齐方式 align-items 设置为 flex-start，这样每个子元素在垂直方向上都相对于容器的顶部对齐。所有 item 元素的高度都固定为 50px，因为我们在前面的示例中已经将宽度设置为自适应了。在这个示例中，我们没有使用 justify-content 属性，因为在纵向排列时通常不需要对齐方式进行调整。