CSS Flex布局：现代网页布局的利器-Cyber超级博客演示站

Flex布局（Flexible Box Layout）是CSS3中引入的一种强大的布局模式，它让我们能够更简单、更灵活地创建响应式网页设计。本文将全面介绍Flex布局的核心概念、属性和实际应用。

什么是Flex布局？

Flex布局是一种一维布局模型，专门为在单个轴（水平或垂直）上排列项目而设计。它解决了传统布局方式（如浮动和定位）的许多痛点，使元素能够根据可用空间动态调整大小和位置。

传统布局的局限性

依赖浮动(float)和清除(clear)垂直居中实现复杂等高列需要hack响应式设计实现繁琐

Flex布局的优势

简单易用的对齐和分布控制自动计算和分配空间轻松实现响应式设计无需浮动和清除

Flex布局基础概念

1. Flex容器和项目

Flex容器：设置了display: flex或display: inline-flex的元素Flex项目：Flex容器的直接子元素

2. 主轴和交叉轴

主轴(main axis)：Flex项目排列的主要方向交叉轴(cross axis)：垂直于主轴的方向

Flex容器属性

1. display

定义Flex容器：

.container {  
display: flex;                /* 块级Flex容器 */  
display: inline-flex;         /* 行内Flex容器 */
}

2. flex-direction

定义主轴方向：

.container {  
flex-direction: row;             /* 默认值，水平从左到右 */  
flex-direction: row-reverse;     /* 水平从右到左 */  
flex-direction: column;          /* 垂直从上到下 */  
flex-direction: column-reverse;  /* 垂直从下到上 */
}

3. flex-wrap

控制项目是否换行：

.container {  
flex-wrap: nowrap;         /* 默认值，不换行   */  
flex-wrap: wrap;           /* 换行，第一行在上 */  
flex-wrap: wrap-reverse;   /* 换行，第一行在下 */
}

4. flex-flow

flex-direction和flex-wrap的简写：

.container {  
flex-flow: row wrap;
}

5. justify-content

定义项目在主轴上的对齐方式：

.container {  
justify-content: flex-start;       /* 默认值，左对齐 */  
justify-content: flex-end;         /* 右对齐 */  
justify-content: center;           /* 居中 */  
justify-content: space-between;    /* 两端对齐，项目间隔相等 */  
justify-content: space-around;     /* 每个项目两侧间隔相等 */  
justify-content: space-evenly;     /* 项目间隔完全相等 */
}

6. align-items

定义项目在交叉轴上的对齐方式：

.container {  
align-items: stretch;         /* 默认值，拉伸填满容器高度 */  
align-items: flex-start;      /* 交叉轴起点对齐 */  
align-items: flex-end;        /* 交叉轴终点对齐 */  
align-items: center;          /* 交叉轴中点对齐 */  
align-items: baseline;        /* 项目基线对齐 */
}

7. align-content

定义多行项目的对齐方式（单行无效）：

.container {  
align-content: stretch;         /* 默认值，拉伸填满容器高度 */  
align-content: flex-start;  
align-content: flex-end;  
align-content: center;  
align-content: space-between;  
align-content: space-around;
}

Flex项目属性

1. order

定义项目的排列顺序（数值越小越靠前）：

.item {  
order: 5; /* 默认0 */
}

2. flex-grow

定义项目的放大比例（默认0即不放大）：

.item {  
flex-grow: 1; /* 等分剩余空间 */
}

3. flex-shrink

定义项目的缩小比例（默认1即空间不足时缩小）：

.item {  
flex-shrink: 0; /* 禁止缩小 */
}

4. flex-basis

定义项目在分配多余空间之前的主轴尺寸：

.item {  
flex-basis: 200px; /* 类似width */  
flex-basis: auto;  /* 默认值，项目原大小 */
}

5. flex

flex-grow, flex-shrink和flex-basis的简写：

.item {  
flex: 1;                       /* flex: 1 1 0 */  
flex: 1 1 auto;              /* 常用写法 */  
flex: none;                    /* flex: 0 0 auto */
}

6. align-self

覆盖容器的align-items设置，定义单个项目的对齐方式：

.item {  
align-self: auto;         /* 默认值，继承align-items */  
align-self: flex-start;  
align-self: flex-end;  
align-self: center;  
align-self: baseline;  
align-self: stretch;
}

Flex布局常见应用场景

1. 水平垂直居中

.container {  
display: flex;  
justify-content: center;  
align-items: center;
}

2. 圣杯布局

<div class="container">  
    <header>Header</header>  
    <main>Main Content</main>  
    <footer>Footer</footer>
</div>

<style>
    .container {  
      display: flex;  
      flex-direction: column;  
      min-height: 100vh;
    }
    
    main {  
      flex: 1; /* 占据剩余空间 */
    }
</style>

3. 等宽卡片布局

.card-container {  
    display: flex;  
    flex-wrap: wrap;
}

.card {  
    flex: 1 1 300px; /* 基础300px，可放大缩小 */  
    margin: 10px;
}

4. 响应式导航栏

<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>    
        <li><a href="#">About</a></li>    
        <li><a href="#">Services</a></li>  
    </ul>  
    <div class="search">Search</div>
</nav>

<style>
  .navbar {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;
  }
  .nav-links {  
    display: flex;  
    list-style: none;  
    gap: 20px;
  }
</style>