CSS3弹性盒模型开发笔记（一）

以下是关于“CSS3弹性盒模型开发笔记（一）”的完整攻略：

1. CSS3弹性盒模型概述

CSS3弹性盒模型是一种用于布局设计的模型，它可以用于任何容器（包括块级和行内元素）中，并且可以解决多种布局问题。通过定义容器中弹性盒子的排列方式和对齐方式，我们可以实现更灵活的布局效果。

1.1 弹性容器和弹性项目

在使用弹性盒模型进行布局时，我们需要将元素包含在一个弹性容器中。弹性容器是一个普通的容器元素，通过设置display:flex或display:inline-flex样式来将其转换为一个弹性容器。

而弹性容器内则包括多个弹性项目，弹性项目是容器内的子元素，每个弹性项目都拥有自己的特性和属性，可以通过这些属性来控制其在弹性容器中的排列方式及对其它弹性项目的影响。

1.2 弹性盒模型的属性

弹性盒模型提供了多种属性来控制弹性容器和弹性项目的布局，下面是其中一些常用的属性：

• flex-direction: 设置弹性容器中弹性项目的主轴排列方向。
• flex-wrap: 设置弹性容器中弹性项目的换行方式。
• justify-content: 设置弹性容器中弹性项目在主轴方向上的对齐方式。
• align-items: 设置弹性容器中弹性项目在交叉轴方向上的对齐方式。
• flex: 设置弹性项目的伸缩比例。

2. 示例说明

以下是两个使用弹性盒模型进行布局的示例，分别说明了如何使用flex-direction、justify-content、align-items以及flex等属性：

2.1 普通列表的垂直居中

有时候我们需要将一个普通的列表垂直居中显示，而弹性盒模型可以实现这个效果。我们可以将ul元素设置为弹性容器，然后通过设置justify-content和align-items属性，来让列表垂直水平居中。

<style>
  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }

  li {
    list-style: none;
  }
</style>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

2.2 弹性盒子的自适应宽度

使用弹性盒模型进行布局时，可以让弹性项目自动计算宽度，这样就能够灵活适应不同的布局情况。

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }

  .item {
    flex: 1;
    background: #f0f0f0;
    margin-right: 10px;
  }
</style>

<div class="container">
  <div class="item">弹性盒子1</div>
  <div class="item">弹性盒子2</div>
  <div class="item">弹性盒子3</div>
</div>

在上面这个例子中，弹性项目的flex属性设置为1，表示弹性项目在主轴方向上等分剩余空间，因此它们的宽度会根据容器的宽度自适应变化。而通过设置justify-content:space-between属性，可以让它们在主轴方向上自动对齐，同时保留彼此之间的空隙。