flex布局制作步骤

以下是使用flex布局的制作步骤：
1. 在父元素上设置display: flex;，这将启用flex布局。
2. 使用justify-content属性设置主轴上的对齐方式，例如center、flex-start、flex-end等。
3. 使用align-items属性设置交叉轴上的对齐方式，例如center、flex-start、flex-end等。
4. 使用flex-wrap属性控制项目是否换行，例如nowrap、wrap、wrap-reverse等。
5. 在子元素上使用flex属性控制子元素在主轴上的占比，例如flex: 1、flex: 2等。
6. 在子元素上使用align-self属性控制子元素在交叉轴上的对齐方式，例如center、flex-start、flex-end等。

下面是一个使用flex布局的例子：

<style>
    #container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .item {
        flex: 1;
        height: 100px;
        margin: 10px;
        background-color: #ccc;
    }
</style>
<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

这个例子中，我们创建了一个id为container的父元素，并在其上设置了display: flex;这将启用flex布局。我们还使用justify-content属性将子元素在主轴上居中对齐，使用align-items属性将子元素在交叉轴上居中对齐，使用flex-wrap属性控制子元素是否换行。在子元素上，我们使用flex属性控制子元素在主轴上的占比，使用align-self属性控制子元素在交叉轴上的对齐方式。最终，我们得到了一个横向展示的子元素列表。