使用flex布局轻松实现页面布局的示例代码

使用flex布局可以轻松实现页面布局，以下是使用flex布局的完整攻略：

1. 定义容器

在CSS中，需要定义一个容器来使用flex布局，可以通过给容器设置display:flex属性来启用flex布局。例如下面的代码：

.container {
  display: flex;
}

2. 设置容器的flex属性

在CSS中，还需要为容器设置一些flex属性来指定子元素的排列方式。

• flex-direction：子元素的排列方向。
• justify-content：子元素在主轴方向上的对齐方式。
• align-items：子元素在交叉轴方向上的对齐方式。
• flex-wrap：子元素是否换行。

例如下面的代码：

.container {
  display: flex;
  flex-direction: row; /* 子元素水平排列 */
  justify-content: center; /* 子元素在主轴方向上居中对齐 */
  align-items: center; /* 子元素在交叉轴方向上居中对齐 */
  flex-wrap: wrap; /* 子元素可以换行 */
}

示例1

下面是一个使用flex布局实现简单的导航栏的示例代码：

<nav class="container">
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container a {
  margin: 0 20px;
}

在上面的代码中，我们给容器设置了flex布局，使得导航栏中的三个链接以水平方向排列，并在主轴方向居中对齐。

示例2

下面是一个使用flex布局实现商品列表的示例代码：

<section class="container">
  <article>
    <img src="1.jpg" alt="商品图片">
    <h3>商品1</h3>
    <p>价格：100元</p>
  </article>
  <article>
    <img src="2.jpg" alt="商品图片">
    <h3>商品2</h3>
    <p>价格：200元</p>
  </article>
  <article>
    <img src="3.jpg" alt="商品图片">
    <h3>商品3</h3>
    <p>价格：300元</p>
  </article>
</section>

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

article {
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}

在上面的代码中，我们给容器设置了flex布局，并使得商品列表中的商品以网格方式排列，可以根据需要设置每个商品的宽度和间距等属性。