<style>
    #div1 {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 500px;
        height: 200px;
        background-color: #ccc;
    }

    #div2 {
        width: 100px;
        height: 100px;
        background-color: #f00;
    }

    #div3 {
        width: 100px;
        height: 100px;
        background-color: #0f0;
    }

    #div4 {
        width: 100px;
        height: 100px;
        background-color: #00f;
    }
</style>

掌握Flex布局方式及其所有属性，铸就美观页面

Flex 布局是 CSS3 中引入的一种新的布局方式，它可以轻松实现各种复杂的布局，并且代码简洁。Flex 布局的原理是将父元素的子元素排列成一行或一列，然后使用 flex 属性来控制子元素的排列方式和大小。

Flex 布局的属性

Flex 布局的属性主要包括以下几个：

• display: flex; 将元素设置为 Flex 布局。
• flex-direction: row|row-reverse|column|column-reverse; 设置子元素的排列方向。
• justify-content: flex-start|flex-end|center|space-around|space-between; 设置子元素在主轴上的排列方式。
• align-items: flex-start|flex-end|center|baseline; 设置子元素在侧轴上的排列方式。
• align-content: flex-start|flex-end|center|space-around|space-between; 设置多行子元素在侧轴上的排列方式。
• flex: 1; 设置子元素的弹性。
• flex-grow: 1; 设置子元素的弹性增长因子。
• flex-shrink: 1; 设置子元素的弹性收缩因子。
• flex-basis: auto; 设置子元素的初始大小。
• order: 1; 设置子元素的排列顺序。

Flex 布局的优势

Flex 布局具有以下优势：

• 代码简洁
• 布局灵活
• 兼容性好
• 性能优化

Flex 布局的应用

Flex 布局可以应用于各种场景，包括：

• 网格布局
• 垂直居中
• 弹性布局
• 响应式布局

Flex 布局的实例

下面是一个使用 Flex 布局的实例：

这个实例中，父元素 div1 设置为 Flex 布局，子元素 div2、div3、div4 分别设置了不同的背景色。然后使用 flex-direction 属性将子元素排列成一行，使用 justify-content 属性将子元素在主轴上居中排列，使用 align-items 属性将子元素在侧轴上居中排列。

总结

Flex 布局是 CSS3 中引入的一种新的布局方式，它可以轻松实现各种复杂的布局，并且代码简洁。Flex 布局的原理是将父元素的子元素排列成一行或一列，然后使用 flex 属性来控制子元素的排列方式和大小。Flex 布局具有代码简洁、布局灵活、兼容性好、性能优化等优势，可以应用于各种场景，包括网格布局、垂直居中、弹性布局、响应式布局等。