CSS-flex布局详细讲解：

CSS Flexbox布局提供了一种更简单的方法来创建灵活的布局，无论是水平还是垂直，都可以轻松应对。以下是关于如何使用Flexbox进行布局的详细说明和示例代码。

一、基本概念

Flexbox布局由两个部分组成：flex容器和flex项目。

1. Flex容器通过设置display: flex;或display: inline-flex;创建。
2. Flex项目是Flex容器的直接子元素。

二、Flex容器属性

1. flex-direction：控制Flex项目的排列方向（水平或垂直）。
2. flex-wrap：控制Flex项目在一行无法容纳时的换行方式。
3. flex-flow：是以上两个属性的简写形式，默认值为row nowrap。
4. justify-content：控制Flex项目在主轴方向上的对齐方式。
5. align-items：控制Flex项目在交叉轴方向上的对齐方式。
6. align-content：在多行存在时，控制Flex项目在交叉轴方向上的对齐方式。

三、Flex项目属性

1. order：定义项目的排列顺序，数值越小，排列越靠前。
2. flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不会放大。
3. flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，会缩小。
4. flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（相当于width/height）。
5. flex：是flex-grow, flex-shrink, flex-basis的简写，默认值为0 1 auto。
6. align-self：允许单个Flex项目有与其他项目不一样的对齐方式。

四、示例代码

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row; /* 水平排列 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
 
.flex-item {
  flex: 1; /* 等分空间 */
  text-align: center; /* 文字居中 */
  border: 1px solid #000; /* 边框 */
  padding: 10px; /* 内边距 */
  margin: 5px; /* 外边距 */
}

这个例子创建了一个水平垂直居中的Flex容器，其中包含了三个等宽的Flex项目。当容器空间不足时，项目会自动换行。