CSS3 Flex 弹性布局实例代码详解

下面我将为您详细讲解“CSS3 Fle 弹性布局实例代码详解”的攻略。

一、什么是Flex布局

Flex布局也称弹性布局，是一种以 “行” 和 “列” 的方式来布局内容的，是CSS3 新增的布局方式。

Flex布局是可以应用到任何一个容器 （container）上的。常用的父元素有：div、section、article、main、aside、nav、ul、ol 以及其他容器。

二、如何使用Flex布局

使用Flex布局需要在父元素上设置 display: flex 属性，即可开启Flex布局模式。

以一个典型的容器为例：

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>

可以通过以下的CSS样式，将其变为Flex布局模式：

.container {
  display: flex;
}

这样就可以将 .container 父元素内的三个 .item 子元素变成Flex布局模式的子元素，从而可以根据需求对子元素的排布进行调整。

三、Flex布局的常用属性

以下是Flex布局的常用CSS属性：

1. flex-direction

flex-direction 属性定义了Flex容器中的主轴方向。

在默认情况下，Flex容器的主轴方向是水平轴（row），即从左到右。也可以通过将该属性设置为 column，使主轴方向变成竖轴，即从上到下。

2. justify-content

justify-content 属性定义在Flex容器中，如何对齐子元素。

当Flex容器中的子元素没有占满父元素时，justify-content 属性就会生效，该属性可以接受以下值：

• flex-start：从左对齐（默认值）
• flex-end：从右对齐
• center：居中对齐
• space-between：在父元素中对子元素进行平分，即使第一个子元素不能与父元素对齐
• space-around：在父元素上对子元素进行平分，并将左右子元素与父元素进行对齐

3. align-items

align-items 属性定义子元素在交叉轴上 （cross-axis） 的对齐方式。在默认情况下，子元素在交叉轴上的对齐方式为 stretch。

该属性可以接受以下值：

• flex-start：从顶部对齐
• flex-end：从底部对齐
• center：居中对齐
• baseline：与父容器内基线对齐
• stretch：在父容器内内容区域中进行平分

4. flex-wrap

flex-wrap 属性定义了当所有Flex子元素占满Flex 父容器时，要不要将它们换行。

该属性可以接受以下值：

• nowrap：子元素都在一行内放置（默认值）
• wrap：当父元素有足够的宽度时，子元素换行
• wrap-reverse：当父元素可用宽度不足时，子元素会在最后一行上换行，即反向折行

5. align-content

align-content 属性定义了多行Flex子元素与父元素交叉轴上的对齐方式。如果只有一行，该属性不生效。

该属性可以接受以下值：

• flex-start：从顶部对齐
• flex-end：从底部对齐
• center：居中对齐
• space-between：在父容器中对每一行的元素进行平分，即使第一个子元素不能与父元素对齐
• space-around：在父元素上对行和子元素进行平分，即使第一个子元素不能与父元素对齐
• stretch：均分交叉轴

在这里，我结合两个示例来说明Flex布局常用属性的用法。

四、示例1

下面是一个简单的Flex布局的示例，用于给您展示Flex布局的基本用法。该示例中定义了一个父元素 .container，并在其中定义了三个子元素 .item。

你可以通过调整CSS样式，来实现各种不同的布局效果。

<div class="container">
  <div class="item" style="background-color: red;">item1</div>
  <div class="item" style="background-color: blue;">item2</div>
  <div class="item" style="background-color: green;">item3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  height: 400px;
}

.item {
  width: 100px;
  height: 100px;
}

代码解释：

1. .container 是父元素，并设置为 Flex 布局模式；
2. flex-direction 设置为 row，即采用主轴方向为水平轴；
3. justify-content 设置为 flex-start，即从左对齐；
4. align-items 设置为 stretch，即子元素在交叉轴上占据整个父元素高度；
5. flex-wrap 设置为 nowrap，让子元素都在一行内放置；
6. align-content 设置为 stretch，由于仅有一行子元素，此属性不生效；
7. 每个子元素的宽高均为 100px，容器的高度为 400px。

示例2

下面的示例是一个基于Flex布局创建的导航菜单，使菜单栏在响应式屏幕上适应设备。

<div class="nav-container">
  <div class="nav-item">Home</div>
  <div class="nav-item">About</div>
  <div class="nav-item">Services</div>
  <div class="nav-item">Contact</div>
  <div class="nav-item">Blog</div>
  <div class="nav-item">Shop</div>
</div>

.nav-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.nav-item {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #333;
  background-color: #ddd;
  margin: 10px;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: #555;
  color: #fff;
  cursor: pointer;
}

代码解释：

1. .nav-container 是 Flex 布局模式的父元素；
2. flex-wrap 设置为 wrap，子元素换行；
3. justify-content 设置为 space-around，让子元素在容器中平均分布；
4. align-items 设置为 center，将每个子元素在交叉轴上居中；
5. max-width 设置为 1200px，保证当屏幕宽度小于该值时，容器不会超出屏幕；
6. margin: 0 auto 居中容器内容；
7. .nav-item 是子元素；
8. 子元素宽为 150px，高为 50px，使用相同的 line-height 和字体大小让文本居中；
9. 增加 hover 效果，当鼠标经过菜单时更改菜单的颜色，并将鼠标指针变为手型。

五、总结

以上是关于 CSS3 Flex 弹性布局的详细攻略，常用的Flex布局属性有 flex-direction、justify-content、align-items、flex-wrap 和 align-content。

可以运用这些属性创建各种不同的布局效果，如制作导航菜单、响应式网页和各种常见的UI组件。使用Flex布局可以大大提高网站的布局效率，且极大的方便了对不同屏幕设备的适配。