基础的CSS3弹性盒Flexbox布局使用实例

关于基础的CSS3弹性盒Flexbox布局使用实例，我们可以分为以下几个步骤进行讲解：

1. 理解Flexbox布局

Flexbox布局是CSS3中新增的一种布局方式，它的目的是更方便、更灵活地实现容器内部的元素的定位、排列和对齐。与传统的布局方式相比，Flexbox布局明确了容器和子元素的角色，对于布局和对齐的需求提供了更多的控制。在Flexbox布局中，有几个比较重要的概念：

• Flex容器：用 display: flex 或 display: inline-flex 定义的容器。
• 主轴和交叉轴：Flex容器的主轴和交叉轴是很重要的概念。主轴（main axis）默认是横向的，并且可以使用 justify-content 属性对子元素进行对齐；交叉轴（cross axis）则是纵向的，默认垂直居中，可以使用 align-items 属性进行对齐。
• 子元素：指基于 Flexbox 布局模型的容器内部所有直接子元素。在Flexbox布局中，子元素的布局方式受到主轴和交叉轴的影响，它们的大小和位置由容器和其他子元素共同决定。

2. Flexbox布局的基本用法

Flexbox布局的使用涉及到一些 CSS 属性。这里简单地介绍一下 Flexbox 布局的基本用法：

2.1 定义Flex容器

Flex布局必须在容器上定义，通过设置 display 属性为 flex或 inline-flex 来定义一个 Flex 容器。

.container {
  display: flex; /* 定义Flex容器 */
}

2.2 设定Flex子元素的大小和位置

Flex子元素的大小和位置是由父容器决定的。可以使用 flex-direction 来指定 Flex 容器的主轴方向，justify-content 来控制子元素在主轴上的对齐方式，align-items 来控制子元素在交叉轴上的对齐方式。

.container {
  display: flex; /* 定义Flex容器 */
  flex-direction: column; /* 设置主轴方向为垂直 */
  justify-content: center; /* 在主轴上居中对齐 */
  align-items: center; /* 在交叉轴上居中对齐 */
}

2.3 控制Flex子元素的排列顺序

在 Flexbox 中，子元素的排列顺序不一定按照 HTML 中的顺序，我们可以使用 order 属性来改变默认的排列顺序。

.container {
  display: flex; /* 定义Flex容器 */
}

.item:nth-child(2) {
  order: 1; /* 将第二个子元素放到第一个 */
}

3. 示例说明

我们通过两个示例来说明 Flexbox 布局的使用方法。

3.1 示例1：Flexbox实现图片墙

下面的示例演示了如何使用 Flexbox 布局来实现一个图片墙：

<div class="container">
  <div class="item"><img src="1.jpg"></div>
  <div class="item"><img src="2.jpg"></div>
  <div class="item"><img src="3.jpg"></div>
  <div class="item"><img src="4.jpg"></div>
  <div class="item"><img src="5.jpg"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap; /* 让子元素可以换行 */
  justify-content: space-between; /* 在主轴上平均分布子元素 */
  align-items: center; /* 在交叉轴上居中对齐 */
}

.item {
  width: 32%; /* 控制每个子元素的宽度 */
  margin-bottom: 20px;
  flex: 0 0 auto; /* 定义子元素不能伸缩，也不能缩小 */
}

.item img {
  width: 100%;
  height: auto;
}

在这个示例中，我们使用 Flexbox 布局将子元素排列成一行，通过设置 flex-wrap 属性来允许子元素换行。然后使用 justify-content 属性平均分布子元素，使用 align-items 属性居中对齐。每个子元素的宽度通过 CSS 样式控制，高度自适应。

3.2 示例2：Flexbox实现响应式布局

下面的示例演示了如何使用 Flexbox 布局来实现一个响应式布局：

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

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

.item {
  flex: 1; /* 设置子元素的相对宽度 */
  padding: 20px;
  border: 1px solid #333;
}

/* 在小屏幕下一行只显示一个子元素 */
@media (max-width: 768px) {
  .item {
    flex-basis: 100%; /* 在小屏幕下子元素的基础宽度为100% */
  }
}

在这个示例中，我们使用 Flexbox 布局将子元素排列成一行。每个子元素的宽度通过设置 flex 属性来定义，其中 flex: 1 可以让所有子元素平均分配剩余空间。在小屏幕下我们通过媒体查询的方式将子元素的基础宽度设置为100%，这样只会在一行中显示一个子元素。