关于Flex布局的主轴方向与对齐方式

目录：

• 前言
• 一、使用 flex-direction 属性改变主轴的方向
• 二、主轴修改后对齐方式的变化
• 三、具体代码实现
• 总结

---

前言

        Flex布局模型中，弹性盒子默认沿着主轴方向排列，默认的主轴方向为横向也就是水平排列，但如果要使用Flex布局模型使弹性盒子沿着竖直方向排列，就需要更改Flex布局的主轴方向。

一、使用 flex-direction 属性改变主轴的方向

 

flex-direction 属性的属性值有：row，column，row-reverse，column-reverse

二、主轴修改后对齐方式的变化

        1. 如果不加对齐方式，默认会在盒子左上排列。

        2. 如果要加对齐方式，（这里举例实现居中效果）有两个属性：

        ①. justify-content : center ;    主轴方向居中

        ②. align-items : center ;         侧轴方向居中

▲ 要想使其水平或者垂直居中，先找主轴的方向，找到主轴方向，确定水平或垂直用哪个属性。

三、具体代码实现

    
    
    
    
    



    

        

            

                
                媒体
            
        
    

结果展示：

---

总结

        以上就是我对于flex主轴方向以及对齐方式的一些理解，简单介绍了flex布局的一小部分知识，在这里分享出来供大家参考。