详细具体一点，最好再加点例子

好的，以下是一个比较详细的例子：

HTML代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS代码：

.container {
  display: flex; /* 容器设置为flex布局 */
  flex-direction: row; /* 子元素水平排列 */
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: center; /* 子元素在垂直方向上居中对齐 */
}

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  display: flex; /* 内部也可以使用flex布局 */
  justify-content: center;
  align-items: center;
}

以上代码实现了一个容器中有5个子元素的布局，子元素之间的间隔相等，同时子元素在垂直方向上居中对齐。容器和子元素都使用了flex布局，通过设置不同的属性，实现了不同的布局效果。

另外，还可以使用flex-grow、flex-shrink和flex-basis等属性来控制子元素的缩放比例、最小宽度或高度等，更加灵活地控制布局。