Flexbox布局 - 当发网

什么是Flexbox？

Flexbox（弹性盒子）是一种一维布局模型，用于在行或列中排列元素，使元素能够响应式地适应可用空间。

Flexbox的优势：

轻松实现元素的垂直和水平居中
自动分配容器内的空间
轻松创建响应式布局
改变元素的显示顺序
处理不同尺寸的元素
简化复杂布局的实现

Flexbox的基本概念

Flex容器：设置了display: flex的元素
Flex项目：Flex容器的直接子元素
主轴：Flex项目排列的主要方向
交叉轴：与主轴垂直的方向
主轴起点/终点：主轴开始和结束的位置
交叉轴起点/终点：交叉轴开始和结束的位置

Flex容器和Flex项目

要使用Flexbox，需要将一个容器元素设置为flex容器：

                        CSS
                    
                        .container {
    display: flex;
}

容器内的直接子元素自动成为flex项目：

项目 1

项目 2

项目 3

Flex容器的显示模式

属性值	描述
flex	生成块级Flex容器
inline-flex	生成内联Flex容器

Flex容器属性

1. flex-direction

定义主轴的方向：

                        CSS
                    

                        .container {
    flex-direction: row; /* 默认值：从左到右 */
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
                    

属性值	描述
row	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

2. justify-content

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

                        CSS
                    

                        .container {
    justify-content: flex-start; /* 默认值 */
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
}
                    

属性值	描述
flex-start	项目对齐主轴起点
flex-end	项目对齐主轴终点
center	项目在主轴居中
space-between	项目均匀分布，首尾项目贴边
space-around	项目均匀分布，每个项目两侧空间相等
space-evenly	项目均匀分布，所有间隔相等

3. align-items

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

                        CSS
                    

                        .container {
    align-items: stretch; /* 默认值 */
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */
    /* align-items: baseline; */
}
                    

属性值	描述
stretch	项目拉伸填满交叉轴（如果项目未设置高度）
flex-start	项目对齐交叉轴起点
flex-end	项目对齐交叉轴终点
center	项目在交叉轴居中
baseline	项目按基线对齐

4. flex-wrap

定义项目是否换行：

                        CSS
                    

                        .container {
    flex-wrap: nowrap; /* 默认值 */
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */
}
                    

属性值	描述
nowrap	不换行，项目可能会缩小以适应容器
wrap	换行，项目按顺序排列在多行
wrap-reverse	换行，但行顺序反转

5. align-content

定义多行项目在交叉轴上的对齐方式（当项目有多行时生效）：

                        CSS
                    

                        .container {
    align-content: stretch; /* 默认值 */
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
}
                    

6. flex-flow

flex-direction和flex-wrap的简写：

                        CSS
                    
                        .container {
    flex-flow: row wrap;
}

Flex项目属性

1. order

定义项目的排列顺序：

                        CSS
                    
                        .item {
    order: 2; /* 默认值为0 */
}

2. flex-grow

定义项目的放大比例：

                        CSS
                    
                        .item {
    flex-grow: 1; /* 默认值为0 */
}

3. flex-shrink

定义项目的缩小比例：

                        CSS
                    
                        .item {
    flex-shrink: 1; /* 默认值为1 */
}

4. flex-basis

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

                        CSS
                    
                        .item {
    flex-basis: 100px; /* 默认值为auto */
}

5. flex

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

                        CSS
                    

                        .item {
    flex: 1; /* 等同于 flex: 1 1 0% */
    /* flex: 0 1 auto; */
    /* flex: 2 1 200px; */
}
                    

6. align-self

允许单个项目有与其他项目不一样的对齐方式：

                        CSS
                    
                        .item {
    align-self: center; /* 默认值为auto */
}

属性值	描述
auto	继承容器的align-items值
flex-start	项目对齐交叉轴起点
flex-end	项目对齐交叉轴终点
center	项目在交叉轴居中
baseline	项目按基线对齐
stretch	项目拉伸填满交叉轴

Flexbox布局模式

等分布局

                        CSS
                    

                        .container {
    display: flex;
}

.item {
    flex: 1;
}
                    

固定+自适应布局

                        CSS
                    

                        .sidebar {
    flex: 0 0 200px; /* 不放大，不缩小，固定200px */
}

.main {
    flex: 1; /* 自适应剩余空间 */
}
                    

圣杯布局

                        CSS
                    

                        .container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header, .footer {
    flex: 0 0 auto;
}

.content {
    flex: 1;
    display: flex;
}

.sidebar {
    flex: 0 0 200px;
}

.main {
    flex: 1;
}
                    

实际应用示例

导航菜单

                        CSS
                    

                        .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #333;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav-menu {
    display: flex;
    gap: 1rem;
}
                    

卡片布局

                        CSS
                    

                        .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.card {
    flex: 1 1 300px;
    max-width: 400px;
}
                    

表单布局

                        CSS
                    

                        .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .form-group {
        flex-direction: row;
        align-items: center;
    }
    
    .form-label {
        flex: 0 0 150px;
    }
    
    .form-input {
        flex: 1;
    }
}
                    

Flexbox交互演示

当前布局: row

项目数量: 5

容器尺寸: 600×200px

容器属性

flex-direction: justify-content: align-items:

布局属性

flex-wrap: align-content: 容器宽度: 600px

项目属性

项目数量: 5 项目基础尺寸: 100px 项目间距: 10px

生成的CSS代码

                            CSS
                        

                            .flex-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  align-content: stretch;
  gap: 10px;
}
                        

Flexbox最佳实践

使用Flexbox进行一维布局，Grid进行二维布局
优先使用简写属性（如flex）
合理使用flex-grow、flex-shrink和flex-basis
注意浏览器兼容性，必要时使用前缀
结合媒体查询创建响应式布局
使用gap属性设置项目间距（现代浏览器支持）

提示： Flexbox特别适合以下场景：导航菜单、卡片布局、表单布局、垂直居中、等分布局和圣杯布局。

浏览器兼容性

Flexbox在现代浏览器中有很好的支持：

Chrome

29+

Firefox

28+

Safari

Edge

12+

11（部分支持）

注意： 在IE11中，Flexbox有一些已知问题，需要使用特定的hack或回退方案。

上一课：定位下一课：Grid布局