flex是什么及flex布局语法教程详解

下面是详细讲解“flex是什么及flex布局语法教程详解”的攻略：

1. flex是什么？

flex是CSS3中引入的一种布局方式，被称为“弹性布局”，相对于传统的布局方式（如float或者position）来说更加灵活。使用flex布局，可以轻松实现自适应布局，解决在传统布局中出现的浮动、清除浮动等问题，而且简单易学，容易维护。

2. flex布局语法

2.1 父容器的属性

在使用flex布局中，需要将父容器的display属性设置为flex，以启用弹性布局。接下来是一些用于控制父容器的常用属性：

• flex-direction：定义主轴的方向（row、row-reverse、column、column-reverse）。

• justify-content：定义项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。

• align-items：定义项目在交叉轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。

• flex-wrap：定义项目的换行方式（nowrap、wrap、wrap-reverse）。

• align-content：定义多条轴线的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。

下面是一个示例代码，该代码定义了一个flex容器，并设置了上述5个属性的值：

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap; 
  align-content: stretch;
}

2.2 子项的属性

除了父容器的属性，子项也可以拥有自己的属性，用于控制子项的布局。以下是一些可用于子项的属性：

• order：定义子项的排列顺序，数字越小，排列越前面。

• flex：定义子项的放大比例，默认为0，即不放大。

• flex-grow：定义子项的放大比例，如果存在剩余空间，将按照子项的比例分配，默认为0。

• flex-shrink：定义子项的收缩比例，如果空间不足，将按照子项的比例缩小，默认为1。

• flex-basis：定义子项的基准大小，默认为auto。

• align-self：定义子项的对齐方式，覆盖父容器的align-items属性。

下面是一个示例代码，该代码定义了三个子项，分别设置了不同的放大比例和对齐方式：

.item-1 {
  flex: 1;
  align-self: flex-start;
}

.item-2 {
  flex: 2;
  align-self: center;
}

.item-3 {
  flex: 1;
  align-self: flex-end;
}

3. 示例

接下来是两个应用flex布局的示例：

3.1 示例一：实现自适应布局

假设我们需要实现一个自适应宽度的三列布局，其中左右两列宽度固定，中间一列自适应宽度。以下是用flex布局实现该效果的代码：

<div class="container">
  <div class="item-1">左侧内容</div>
  <div class="item-2">中间内容</div>
  <div class="item-3">右侧内容</div>
</div>

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

.item-1, .item-3 {
  width: 100px;
}

.item-2 {
  flex: 1;
}

3.2 示例二：实现水平垂直居中

假设我们需要实现一个水平垂直居中的布局，包含一个固定宽高的容器和一个文本内容。以下是用flex布局实现该效果的代码：

<div class="container">
  <div class="box">固定宽高容器</div>
  <div class="text">文本内容</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;  /* 使容器铺满整个屏幕 */
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f00;
}

.text {
  margin-left: 20px;
  font-size: 24px;
}

通过设置父容器的justify-content和align-items属性为center，可以使子项水平垂直居中。同时，为了让容器铺满整个屏幕，需要设置父容器的高度为100vh。以上代码中，通过设置margin-left属性来调整文本内容的位置，实现了水平对齐。