几个CSS3的flex弹性盒模型布局的简单例子演示

好的！接下来我将详细讲解如何使用CSS3的flex弹性盒模型布局来对页面进行排版。

什么是CSS3的flex弹性盒模型布局

CSS3的flex弹性盒模型布局指的是CSS3中引入的一种布局方式，是一种用于在不同设备上灵活排版的方法。使用flex布局，可以轻松地实现一些复杂的布局效果，如水平居中/垂直居中、等高布局等，非常方便和强大。

布局容器和子元素

使用flex布局的第一步是确定要使用flex布局的容器，这个容器即为父元素。父元素通过设置display: flex;属性来启用flex布局。

同时，父元素下的所有子元素都将作为flex子项进行布局，也就是说，flex布局是通过父元素来控制子元素的排列方式的。

flex容器属性

使用flex布局时，有很多属性可以控制父元素的排列方式。

flex-direction

该属性控制flex子项沿主轴的排列方式，常用的属性值包括：row（默认值，从左到右排列）、row-reverse（从右到左排列）、column（从上到下排列）和column-reverse（从下到上排列）。

示例：

.container {
  display: flex;
  flex-direction: column;
}

justify-content

该属性控制flex子项在主轴方向上的对齐方式，常用的属性值包括：flex-start（靠左对齐）、center（居中对齐）、flex-end（靠右对齐）、space-between（两端对齐，子项之间的间隔相等）、space-around（子项两侧的间隔相等）。

示例：

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

align-items

该属性控制flex子项在侧轴方向上的对齐方式，常用的属性值包括：flex-start（顶部对齐）、center（居中对齐）、flex-end（底部对齐）、baseline（基线对齐）、stretch（子项高度拉伸，填满flex容器）。

示例：

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

flex-wrap

该属性控制是否换行，常用的属性值包括：nowrap（不换行）和wrap（换行）。

示例：

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

flex子元素属性

使用flex布局时，有很多属性可以控制子元素的排列方式。

flex-grow

该属性控制flex子项在填充剩余空间时所占的比例，默认值为0。

示例：

.item {
  flex-grow: 1;
}

flex-shrink

该属性控制flex子项在空间不足时所占的比例，值越大，则在空间不足时所占的比例越大，默认值为1。

示例：

.item {
  flex-shrink: 0;
}

flex-basis

该属性设置flex子项在主轴方向上占据的空间大小，可以理解为该项的初始宽度或高度。

示例：

.item {
  flex-basis: 20%;
}

align-self

该属性覆盖容器属性align-items，控制单个flex子项在侧轴方向上的对齐方式，常用的属性值和align-items相同。

示例：

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

示例说明

水平居中示例

下面是一个使用flex布局实现水平居中的例子：

<div class="center-horizontal">
  <p>这是一段文字</p>
</div>

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

在这个例子中，我们将容器的display设置为flex，并且使用justify-content和align-items将子元素水平和垂直居中。

等高布局示例

下面是一个使用flex布局实现等高布局的例子：

<div class="equal-height">
  <div class="item">
    <p>这是第一个元素</p>
  </div>
  <div class="item">
    <p>这是第二个元素</p>
    <p>这是第二个元素下面的文字</p>
  </div>
</div>

.equal-height {
  display: flex;
}
.item {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

在这个例子中，我们将容器的display设置为flex，并且在子元素的样式中设置了flex: 1;，这样每个子元素就会平均分配剩余的空间，从而实现等高布局。

以上就是对CSS3的flex弹性盒模型布局进行简单例子演示的完整攻略。