完整教程：CSS3的学习之flex布局

Flex布局基础概念

Flex布局（弹性盒子布局）是CSS3中用于页面布局的模块，通过display: flex或display: inline-flex启用。其核心思想是让容器能够动态调整子元素的排列方式，适应不同屏幕尺寸和设备。

容器属性

flex-direction
修改主轴方向，定义主轴方向，控制子元素排列方式：

• row（默认）：水平排列，从左到右。
• row-reverse：水平排列，从右到左。
• column（常用）：垂直排列，从上到下。
• column-reverse：垂直排列，从下到上。

flex-wrap
控制子元素是否换行：

• nowrap（默认）：不换行父级不够时压缩。
• wrap（常用）：换行，从上到下父级宽度不够，换行。
• wrap-reverse：换行，从下到上。

justify-content
定义子元素在主轴上的对齐方式：

• flex-start（默认）：左对齐。
• flex-end：右对齐。
• center（常用）：居中对齐。
• space-between（常用）：两端对齐，项目间间距相等。
• space-around（常用）：项目两侧间距相等，盒子之间的间距是两侧的两倍。
• space-evenly（常用）：弹性盒子两侧与容器之间间距相等

align-items

定义子元素在交叉轴上的对齐方式：

• stretch（默认）：拉伸填满容器，弹性盒子在没有高度才可以拉伸。
• flex-start（常用）：顶部对齐。
• flex-end：底部对齐。
• center（常用）：垂直居中对齐。
• baseline：基线对齐。

align-self（常用）(单独控制某个盒子的侧轴对齐方式)

align-content
控制多行子元素在交叉轴上的对齐方式（需flex-wrap: wrap生效）：

• stretch（默认）：拉伸填满交叉轴。
• flex-start：（常用）顶部对齐。
• flex-end：底部对齐。
• center：（常用）垂直居中对齐。
• space-between：（常用）两端对齐。
• space-around：（常用）均匀分布。
• space-evenly :每行间距相同

子元素属性

flex-grow
定义子元素的放大比例，默认为0（不放大）。若为1，则占据剩余空间。

flex-shrink
定义子元素的缩小比例，默认为1（允许缩小）。若为0，则禁止缩小。

flex-basis
定义子元素的初始大小，默认为auto。可设为固定值（如100px）或百分比。

flex（常用）
简写属性，格式为flex-grow | flex-shrink | flex-basis。例如：

• flex: 1 等价于 flex: 1 1 0。
• flex: 0 auto 等价于 flex: 0 1 auto。

align-self
覆盖容器的align-items设置，控制单个子元素的对齐方式：

• auto（默认）：继承父容器设置。
• flex-start / flex-end / center / baseline / stretch。

示例代码

.  


    

        

            

                

                    
抖音
                    
抖音，是字节跳动公司推出的一款短视频社交平台。
                
            

                

                    
京东
                    
京东，是京东集团旗下品牌，是京东集团旗下电商平台。
                
            
3
            
4
        
    

代码解析：

display: flex; /* 块级元素 flex 弹性布局 */

justify-content: space-between; /*  均分  ,均等分 */

效果图：

适用场景

1. 响应式导航栏：通过justify-content和flex-wrap实现自适应排列。
2. 等高布局：利用align-items: stretch使子元素高度一致。
3. 垂直居中：结合justify-content: center和align-items: center快速实现居中效果。

Flex布局简化了复杂布局的实现，尤其适合需要动态调整的界面设计。