flex盒子布局 - 通过主轴和侧轴学习对齐方式

CSS Flexible Box Layout 就是css的弹性盒子布局，简称flex布局，相对于box布局来说，功能更多一些，使用起来也相对灵活。

先了解一下方向轴的概念

主轴（main axis）和侧轴（cross axis），其中侧轴也可以翻译成交叉轴。

主轴和侧轴的定义是通过定义flex-direction属性得来的，也就是说，你定义flex-direction为row 或 row-reverse，那么主轴方向就是横轴，x轴。如果你定义flex-direction为column 或 column-reverse，那么你的主轴方向就是纵轴，y轴。

了解主轴和侧轴的关系，有助于学习flex盒子布局的对齐方式，在阅读文档时也会有所帮助。

与主轴侧轴方向相关的对齐属于有哪些？

• align-content    【容器】堆栈伸缩行，flex-wrap为nowrap时，该样式无效
• align-items       【容器】侧轴上项目对齐方式
• align-self          【元素】侧轴上单个项目对齐方式
• just-content      【容器】主轴对齐

align-content

定义在容器上的属性，控制侧轴方向上内容的对齐方式。

示例代码：http://jsrun.pro/yrWKp

注：该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap），flex-wrap默认的属性就是nowrap，所以我们在学习align-content的时候要注意，一定要将flex-wrap的默认值改掉。

align-items

定义在容器上的属性，align-self的容器层面的属性，与align-self效果一致。

align-self

定义在元素上的属性，控制单个元素的对齐方式，覆盖容器上align-items的属性值。

just-content

定义在容器上的属性值，控制容器主轴方向上内容的对齐方式。

 

示例代码

可以看到下面的示例图片中，头像与右边的信息是横向展示，网名文字和QQ图标用了居中对齐。

    
    
    




    

        

            
        
        

            

                

                    独守空城忆旧梦
                
                
            
            

                任何时候都要记得，给人生留点余地，得到时不自喜，失去时不抑郁。留一点好处让别人占，留一点道路让别人走，留一点时间让自己思考。
            
        
    

    

        

            
        
        

            

                

                    对你微笑纯粹出于礼貌ˇ
                
                
            
            

                胆量不够大，能力再强都是小人物！魄力不够大，努力一生都是小成就！在成长的路上，我们突破的不是现实，而是自己。在人生的跑道上，战胜对手，只是赛场的赢家，战胜自己，才是命运的强者。
            
        
    
    

        

            
        
        

            

                

                    ☆⌒糖罐子℡
                
                
            
            

                不忘初心，方得始终。只有走过弯路，才更确信当初最想要的是什么。有些事，想多了头疼，想通了心疼。人生旅途，不是每一段旅行都要邂逅，也不是每一段生命都需要故事，就算多数时间都是一个人孤单且平淡在走，只要足够有爱，就不会寂寞。