简介

CSS Flexbox（Flexible Box）模块旨在提供一种更有效的方式来布局、对齐和分配在容器中项目之间的空间，即使它们的大小未知或是动态变化的。

基础概念

Flexbox布局主要涉及两种元素：

• Flex容器（Flex container）：包含所有Flex项目的父元素。
• Flex项目（Flex item）：Flex容器的直接子元素。

要创建一个Flex容器，需要将元素的display属性设置为flex或inline-flex：

.container {
    display: flex;
}
                

案例讲解

下面是一个使用Flexbox布局的简单网页示例。

1. 创建一个Flex容器

我们将创建一个包含三个子项的Flex容器：

    
    
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平对齐 */
            align-items: center; /* 垂直对齐 */
            height: 100px;
            border: 1px solid #ccc;
        }
        .flex-item {
            background-color: lightblue;
            padding: 20px;
            margin: 5px;
            border: 1px solid blue;
            text-align: center;
        }
    


    

        
Item 1
        
Item 2
        
Item 3
    


                

2. 运行效果

在浏览器中打开上面的代码，你将看到一个包含三个子项的Flex容器，这些子项在水平方向上均匀分布，并在垂直方向上居中对齐。

3. 调整属性

你可以通过调整Flex容器的justify-content和align-items属性来改变子项的对齐方式：

• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
• align-items: flex-start | flex-end | center | baseline | stretch

结论

CSS Flexbox提供了一个非常灵活的方式来处理复杂的布局问题，特别是在屏幕大小变化时。通过理解Flex容器和Flex项目的基本概念，你可以创建一个响应式、水平垂直居中的布局。